我怎样才能做 mansory 风格或类似这个图像区域的东西

Question

我正在使用 Bootstrap4。如果我使用 img-fluid 标签响应 mansory 风格的画廊。例如，第二张图片很长（高度）并且与其他图片有很多 space 。我怎样才能像这样制作这个画廊，例如 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>

Answer 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>

如果你想去掉单元格中的水平填充，在图像之间创建一个装订线，你总是可以不使用 bootstrap .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>

Answer 2

纯 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>

我怎样才能做 mansory 风格或类似这个图像区域的东西

How can I do mansory style or something like this image area

html

css

image

gallery