我该怎么做mansory风格或类似的图像区域

问题描述

我正在使用Bootstrap4.如果我对带有img-fluid标签的mansory样式库做出响应.例如，第二张图像很长(与高度一样)，而其他图像有很大的空间.我该如何像tumblr或pexels.com这样的画廊?

I'm using Bootstrap4. If I do responsive for mansory style gallery with img-fluid tag. For example, the second image is so long(as height) and there is a so much space with other images. How can I do this gallery like these for example tumblr or 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>

我确实喜欢这个答案，但是我需要对此进行延迟加载.我已经做了很多尝试，但是我可以一起做，请帮忙！

I did like the answer but I need lazy load on this. I've tried so much but I could do this together please help!

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

推荐答案

响应式砌体的纯CSS版本，未使用插件或脚本.

Pure CSS version of responsive masonry, no plugin or script used.

@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风格或类似的图像区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！