響應式圖片庫解決方案

Question

我想問一些關於響應式圖庫。

這是我想要做的一個例子。所以，如您所見，圖像的大小不固定。它只是保存比例的縮略圖。

我不確定它是如何工作的。我應該如何讓我的迴應？

應該怎麼做？如果有一些現成的解決方案，請告訴我。

謝謝。

Answer 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; 
} 

Answer 2

http://masonry.desandro.com/幾乎是你所需要的。