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.

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

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

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

.masonry {
  margin: 1.5em0;
  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: 001em;
  width: 100%;
}

.itemimg {
  max-width: 100%;
  height: auto;
  display: block;
}

<divclass="masonry"><divclass="item"><imgclass="img-fluid"src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"></div><divclass="item"><imgclass="img-fluid"src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"></div><divclass="item"><imgclass="img-fluid"src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"></div><divclass="item"><imgclass="img-fluid"src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"></div><divclass="item"><imgclass="img-fluid"src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"></div><divclass="item"><imgclass="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'
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"rel="stylesheet"><divclass="row"><divclass="col-md-4"><imgclass="img-fluid"src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"></div><divclass="col-md-4"><imgclass="img-fluid"src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"></div><divclass="col-md-4"><imgclass="img-fluid"src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"></div><divclass="col-md-4"><imgclass="img-fluid"src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"></div><divclass="col-md-4"><imgclass="img-fluid"src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"></div><divclass="col-md-4"><imgclass="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;
}

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