Индикаторы загрузки

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

Основные параметры, влияющие на работу Masonry:

  • itemSelector – CSS-селектор для элементов сетки. Определяет, какие дочерние элементы контейнера будут участвовать в расчётах.
  • columnWidth – ширина колонок сетки. Может быть указана числом (в пикселях) или элементом, высоту которого Masonry будет использовать как базовую ширину колонки.
  • gutter – расстояние между элементами сетки, задаётся в пикселях.
  • fitWidth – если установлено true, Masonry центрирует сетку в контейнере с фиксированной шириной.
const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  fitWidth: true
});

Динамическая подгрузка контента

Masonry особенно эффективна в сочетании с динамическим контентом. При добавлении новых элементов важно вызвать метод appended() или layout(), чтобы Masonry пересчитала позиции всех блоков:

const newItems = document.querySelectorAll('.grid-item-new');
grid.append(...newItems);
msnry.appended(newItems);
msnry.layout();

Метод appended() уведомляет Masonry о новых элементах, а layout() гарантирует пересчёт всех позиций. При частых обновлениях контента рекомендуется объединять эти вызовы, чтобы избежать мерцания и лишних перерасчётов.

Работа с изображениями

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

imagesLoaded(grid, function() {
  msnry.layout();
});

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

Методы управления Masonry

  • layout() – пересчитывает позиции всех элементов сетки. Используется после изменения размеров элементов или контейнера.
  • reloadItems() – пересчитывает все элементы, заново определяя их размеры и позиции.
  • remove() – удаляет элементы из сетки и автоматически обновляет расположение оставшихся блоков.
  • stamp() / unstamp() – позволяет фиксировать определённые элементы сетки, исключая их из расчётов Masonry.

Пример удаления элемента:

const itemToRemove = document.querySelector('.grid-item-remove');
msnry.remove(itemToRemove);
msnry.layout();

Настройка анимации и переходов

Masonry поддерживает CSS-анимацию через свойства transition. Для плавного перемещения элементов можно использовать следующий стиль:

.grid-item {
  transition: transform 0.4s ease;
}

При вызове layout() блоки будут плавно перемещаться на новые позиции. Комбинация Masonry с CSS-переходами позволяет создавать визуально привлекательные эффекты без использования дополнительных библиотек.

Оптимизация производительности

При работе с Masonry важно учитывать производительность, особенно при большом количестве элементов:

  • Минимизировать частые вызовы layout() — использовать appended() для добавления групп элементов.
  • Декларировать фиксированную ширину колонок через columnWidth, чтобы Masonry не пересчитывала размеры динамически для каждого элемента.
  • Использовать виртуализацию или пагинацию, если количество элементов превышает несколько сотен.

Взаимодействие с другими библиотеками

Masonry легко интегрируется с:

  • Infinite Scroll – для автоматической подгрузки новых элементов при прокрутке.
  • Isotope – для фильтрации и сортировки элементов без нарушения сетки Masonry.
  • Lightbox и другими визуальными плагинами – для отображения изображений в модальных окнах.

Корректная интеграция предполагает вызов layout() после любого изменения DOM, чтобы Masonry могла пересчитать позиции блоков.

Пример полной реализации сетки

<div class="grid">
  <div class="grid-item"><img src="img1.jpg" alt=""></div>
  <div class="grid-item"><img src="img2.jpg" alt=""></div>
  <div class="grid-item"><img src="img3.jpg" alt=""></div>
</div>

<script>
  const grid = document.querySelector('.grid');
  const msnry = new Masonry(grid, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 20,
    percentPosition: true
  });

  imagesLoaded(grid, function() {
    msnry.layout();
  });
</script>

В этом примере используется динамическая ширина колонок через .grid-sizer, что позволяет Masonry автоматически подстраивать сетку под размеры контейнера, обеспечивая адаптивность для различных разрешений экрана.

Оглавление