Решение для решения графических решений

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 как этот

Demo: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/ В значительной степени то, что вам нужно.