Для чего выравнивать блоки таким образом не совсем понятно, а вот расположить много фотографий разного размера в один ровный и адаптивный прямоугольник — очень полезное решение.

Установка:

Подключаем библиотеку jQuery, плагин jQuery Mosaic и его стиль:

HTML код выглядет следующим образом:

Настройки по умолчанию:
maxRowHeight400Максимальная высота рядов.
refitOnResizetrueВосстановление мозайки при изменении размера окна.
refitOnResizeDelayfalseМиллисекунды после изменения размера окна, чтобы переделать мозаику. Оставьте это false, чтобы обновлять мозаику в реальном времени.
defaultAspectRatio1Соотношение сторон фото или блоков, когда ни один не указан или не может быть рассчитан.
maxRowHeightPolicyskip Варианты показа оставшихся блоков.
skip — не показывать элементы, которые не уместились
crop — последнии элементы не сохраняют свои пропорции и растягиваются по ширине с высотой maxRowHeight
oversize — оставшиеся элементы превышают заданную высоту maxRowHeight
tail — последняя строка заполняется не полностью
highResImagesWidthThreshold350Ширина элемента, на котором следует использовать изображение с высоким разрешением вместо обычного. Изображения с высоким разрешением задаются с помощью свойств элемента data-high-res-image-src или data-high-res-background-image-url.
outerMargin0Отступ от края всей мозаики
innerGap0Расстояние между элементами
Демо для изображений:
Демо для блоков:
1
2
3
4
5
6
7
8
9
10
Возможные проблемы и их решения:
  • Оригинальный стиль для всего блока мозайки jQueryMosaic имеет свойство float: left; которое, на мой взгляд, является лишним и может смутить.

  • Если для изображений не заданы атрибуты width и height, Firefox (у меня) не может определить их значения и все фотографии отображаются через настройку defaultAspectRatio

    Для решения этой проблемы нужно включить скрипт после загрузки страницы:

  • Данный скрипт имел конфликт с bootstrap.css (v3.3.4) на md-экране (col-md-8) — неправильный сбор мозайки.

    Для решения этой проблемы внес малую корректировку в стиль bootstrap’a, добавив 2 пикселя к контейнеру:

Более подробную информацию о данном плагине и примеры можно найти на сайте разработчика: jquery-mosaic.tin.cat

Добавить комментарий

Ваш комментарий отправлен!