Как динамически создать коллаж (сетку без пропусков) изображений, где изображения имеют разную высоту?

Question

Я хочу отобразить страницу миниатюр. Эскизы - это загруженные пользователем изображения. Каждое изображение имеет ограниченную ширину, но не ограниченную высоту, чтобы показать полное изображение без обрезки.

Я хочу, чтобы изображения сталкивались друг с другом без промежутков между ними. Количество столбцов не является фиксированным: если я увеличу или увеличу размер страницы, изображения должны перетекать в правильное количество столбцов.

float:left

это почти то, что я хочу. За исключением случаев, когда на странице есть высокие изображения, я получаю такой пробел:

Как мне устранить пробелы?

Answer 1

Не уверен, насколько изящен вам нужен ваш CSS, но тем не менее хороший вариант.Вы можете использовать masonry.js, чтобы помочь этому.

http://css -tricks.com / seamless-response-photo-grid /

Answer 2

Если вы хотите сделать это только в css, вы должны создавать div для каждого столбца и перемещать эти столбцы (но это портит порядок изображений).

В качестве альтернативы вы можете использовать плагин jquery, например1003 * это .