jQuery

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

Подключение и инициализация

Для работы с Masonry требуется подключение самой библиотеки и, при необходимости, jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Инициализация осуществляется через выборку контейнера, внутри которого располагаются элементы сетки:

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

Пояснения параметров:

  • itemSelector — CSS-селектор элементов сетки, которые будут расположены Masonry.
  • columnWidth — задает ширину колонок. Можно использовать элемент-сайзер, чтобы задать адаптивные размеры.
  • percentPosition — при значении true Masonry использует проценты вместо пикселей для позиционирования, что делает сетку более гибкой при изменении ширины контейнера.

Структура HTML

Правильная разметка сетки критически важна для корректной работы Masonry:

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
  <div class="grid-item">Элемент 3</div>
</div>
  • grid-sizer используется для вычисления ширины колонок и может быть пустым.
  • Каждый grid-item представляет отдельный блок контента. Masonry автоматически расставляет элементы по колонкам, учитывая их высоту.

Настройка параметров Masonry

Masonry предоставляет множество опций для тонкой настройки:

  • gutter — расстояние между колонками:
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  gutter: 20,
  percentPosition: true
});
  • fitWidth — при true сетка будет выравниваться по ширине контейнера, не растягиваясь на всю ширину:
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  fitWidth: true
});
  • horizontalOrder — меняет порядок расположения элементов с вертикального на горизонтальный.

Динамическое добавление элементов

Masonry позволяет добавлять элементы после инициализации:

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

var $newItem = $('<div class="grid-item">Новый элемент</div>');

$grid.append($newItem).masonry('appended', $newItem);
  • Метод append добавляет элемент в DOM.
  • Метод masonry(‘appended’, …) уведомляет библиотеку о новом элементе, чтобы пересчитать расположение.

Перестройка сетки

Иногда требуется обновить расположение элементов после изменения их размеров или после загрузки изображений:

$grid.masonry('layout');

Для изображений часто используют событие imagesLoaded, чтобы Masonry перестроила сетку только после полной загрузки всех изображений:

$grid.imagesLoaded().progress(function() {
  $grid.masonry('layout');
});

Адаптивность и медиа-запросы

Для адаптивного дизайна важно использовать процентные размеры и медиазапросы в CSS:

.grid-sizer, .grid-item {
  width: 33.333%;
}

@media (max-width: 768px) {
  .grid-sizer, .grid-item {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .grid-sizer, .grid-item {
    width: 100%;
  }
}
  • Masonry автоматически подстраивает сетку под новые размеры колонок.
  • Процентные значения вместе с percentPosition: true обеспечивают плавное изменение структуры сетки при ресайзе окна.

Эффекты и анимация

Masonry можно сочетать с CSS-анимациями для плавного появления и перестройки элементов:

.grid-item {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
$grid.masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
  • Masonry изменяет позицию элементов через transform, что делает анимацию плавной и GPU-оптимизированной.

Работа с фильтрацией и сортировкой

Для реализации фильтров можно комбинировать Masonry с jQuery:

$('.filter-button').on('click', function() {
  var filterClass = $(this).data('filter');
  $('.grid-item').hide();
  $('.grid-item.' + filterClass).show();
  $grid.masonry('layout');
});
  • Метод hide/show управляет видимостью элементов.
  • masonry(‘layout’) пересчитывает расположение видимых элементов.

Рекомендации по оптимизации

  1. Использовать grid-sizer для точного расчета колонок.
  2. Минимизировать пересчеты сетки при каждом изменении элементов.
  3. Комбинировать Masonry с imagesLoaded для корректного отображения изображений.
  4. Использовать CSS-трансформации для плавной анимации, избегая прямого изменения top/left.

Совместимость с jQuery

Masonry полностью совместим с jQuery, но также поддерживает работу без него. Использование jQuery облегчает:

  • выборку элементов ($('.grid-item'))
  • добавление динамического контента
  • работу с событиями (click, hover)

Это делает библиотеку удобной для проектов, где jQuery уже подключен.

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

Оглавление