我正在使用Bootstrap4。如果我對img-fluid標籤的mansory風格畫廊做出響應。例如,第二張圖像很長(與高度一樣),並且與其他圖像之間有很大的空間。我怎樣才能做這個像這樣的畫廊,例如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>
你是最棒的工作謝謝你! – marlonjd
樂意提供幫助。 –
如何將此代碼添加到lazyload org imgix.js?如果我啓用延遲加載一切......你知道:D – marlonjd