我想问一下响应式画廊。
这是我想要做的一个例子。因此,如您所见,图像的大小不固定。它只是保存比例的缩略图。
我不确定它是如何工作的。我应该如何让我的响应?
应该怎么做?如果有一些现成的解决方案,请告诉我。
感谢。
答案 0 :(得分:1)
正如其他人所说,你可以使用砖石
演示: https://jsfiddle.net/2Lzo9vfc/193/
<强> HTML 强>
<div class="gallery">
<img src="http://placehold.it/450x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/250x150">
<img src="http://placehold.it/550x150">
<img src="http://placehold.it/150x150">
<img src="http://placehold.it/250x150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/450x150">
</div>
<强> JS 强>
$('.gallery').masonry({
itemSelector: 'img',
columnWidth: 1,
});
或者您可以尝试像这样使用flexbox做一些事情
演示: https://jsfiddle.net/2Lzo9vfc/194/
<强> CSS 强>
img {
margin: 5px;
flex: 1 0 auto;
}
.gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
或者你可以使用column
,但我认为这个支持非常糟糕
演示: https://jsfiddle.net/2Lzo9vfc/197/
img {
display: inline-block;
margin: 10px;
width: 100%;
}
.gallery {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
答案 1 :(得分:0)
http://masonry.desandro.com/几乎是你所需要的。