1. 首页
  2. 问答
  3. 我该怎么做人工样式或类似这个图像区域

我该怎么做人工样式或类似这个图像区域

2017-04-07 43 views
0

我正在使用Bootstrap4。如果我对img-fluid标签的mansory风格画廊做出响应。例如，第二张图像很长（与高度一样），并且与其他图像之间有很大的空间。我怎样才能做这个像这样的画廊，例如tumblr或pexels.com？我该怎么做人工样式或类似这个图像区域

<div class="row"> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
      </div> 
     </div>

我不喜欢的答案，但我需要在这个慵懒的负荷。我已经尝试了很多，但我可以一起做这个，请帮助！

@media only screen and (min-width: 1100px) { 
 
    .masonry { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
    .masonry { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
    .masonry { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    } 
 
} 
 

 
.masonry { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
    -moz-column-gap: 1.5em; 
 
    -webkit-column-gap: 1.5em; 
 
    column-gap: 1.5em; 
 
    font-size: .85em; 
 
} 
 

 
.item { 
 
    background-color: #eee; 
 
    display: inline-block; 
 
    margin: 0 0 1em; 
 
    width: 100%; 
 
} 
 

 
.item img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
}
<div class="masonry"> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
 
    </div> 
 
</div>

来源

2017-04-07 marlonjd

回答

1
响应砌筑

纯CSS版本，没有任何插件或脚本使用。

@media only screen and (min-width: 1100px) { 
 
    .masonry { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
    .masonry { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
    .masonry { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    } 
 
} 
 

 
.masonry { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
    -moz-column-gap: 1.5em; 
 
    -webkit-column-gap: 1.5em; 
 
    column-gap: 1.5em; 
 
    font-size: .85em; 
 
} 
 

 
.item { 
 
    background-color: #eee; 
 
    display: inline-block; 
 
    margin: 0 0 1em; 
 
    width: 100%; 
 
} 
 

 
.item img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
}
<div class="masonry"> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
 
    </div> 
 
</div>

来源

2017-04-07 20:14:10

+0

你是最棒的工作谢谢你！ – marlonjd

+0

乐意提供帮助。 –

+0

如何将此代码添加到lazyload org imgix.js？如果我启用延迟加载一切......你知道：D – marlonjd

1

只需添加砌筑到页面，其配置为与itemSelector: '.col-md-4'

$('.row').masonry(function() { 
 
    itemSelector: '.col-md-4' 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
 
    </div> 
 
</div>

如果你想在摆脱了水平填补细胞，造成图像之间的沟槽，你co ULD始终只是没有使用引导.col类那里，也可以添加.nowrap父.row并删除与CSS填充像.nopad > div { padding: 0; }

$('.row').masonry(function() { 
 
    itemSelector: '.col-md-4' 
 
});
.nopad > div { 
 
    padding: 0; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script> 
 
<div class="row nopad"> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
 
    </div> 
 
</div>

来源

2017-04-07 20:09:11

+0

感谢您帮助的人，我怎么可以添加此代码lazyload组织imgix.js？如果我启用懒惰加载所有内容......你知道：D – marlonjd

相关问题

 相关问题