Плавающая галерея миниатюр, разных размеров, как справиться?

Question

Когда вы просто делаете float: слева от всех миниатюр одного размера, галерея выглядит великолепно. Но когда в игру вступают миниатюры разных размеров, это уже не так.

Как лучше всего работать с миниатюрами разного размера? Нужно ли мне вместо этого использовать таблицы?

Answer 1

Ни одно из возможных решений CSS не выглядит особенно хорошо.

Я рекомендую использовать JavaScript + jQuery, в частности, один из следующих плагинов:

• http://masonry.desandro.com/
• http://isotope.metafizzy.co/

Answer 2

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

Answer 3

Я использовал следующий плагин, он работает нормально:

http://suprb.com/apps/gridalicious/

Answer 4

Для тех, кто в 2017 году ищет галерею для изображений разного размера, ознакомьтесь со статьей css-tricks: https://css -tricks.com / seamless-response-photo-grid /