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 i

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

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