Упакованный поток изображений в html / javascript / css

Question

Я хотел бы разместить какое-то неизвестное число (обычно от 3 до 9) изображений или различной ширины и высоты на странице HTML.Порядок, в котором располагаются изображения, не особенно важен.

Когда я просто делаю это с помощью css float и clear: none и т. Д., Результаты часто оказываются неоптимальными, что приводит к большим пробелам, которыене заполнено.

Есть ли какой-нибудь алгоритм и способ управления упаковкой коллекции изображений, чтобы минимизировать пробелы или другие непривлекательные взгляды?

Если бы у меня был хороший алгоритм,Я думаю, что я мог бы упорядочить изображения, используя javascript + css после загрузки html-страницы и изображений.

Спасибо,

Answer 1

Если вы не против использования jQuery, плагин Masonry будет делать именно то, что звучит так, как вы описываете.

Masonry - это плагин динамической разметки сетки для jQuery. Думайте об этом как об обратной стороне CSS-плавающих элементов. В то время как плавающие элементы располагаются горизонтально, а затем вертикально, Masonry размещает элементы вертикально, размещая каждый элемент на следующем открытом месте в сетке. Результат сводит к минимуму вертикальные промежутки между элементами разной высоты, точно так же, как каменщик укладывает камни в стену.

http://masonry.desandro.com/

Answer 2

Еще один плагин jQuery, который стоит рассмотреть, - Изотоп .