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

问题

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>

回答1:

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>

回答2:

Just add masonry to the page and configure it with 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>

And if you want to get rid of the horizontal padding in the cells that creates a gutter between the images, you could always just not use bootstrap .col classes there, or you can add .nowrap to the parent .row and remove the padding with CSS like .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>

来源：https://stackoverflow.com/questions/43286166/how-can-i-do-mansory-style-or-something-like-this-image-area