响应式图库解决方案

时间:2015-11-27 16:09:56

标签: javascript html css responsive-design

我想问一下响应式画廊。

这是我想要做的一个例子。因此,如您所见,图像的大小不固定。它只是保存比例的缩略图。

我不确定它是如何工作的。我应该如何让我的响应?

应该怎么做?如果有一些现成的解决方案,请告诉我。

感谢。

2 个答案:

答案 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/几乎是你所需要的。