resize

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

Событие resize и пересчет сетки

Masonry не отслеживает автоматически изменение размеров элементов, если только не используется встроенная опция resize: true.

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  resize: true
});
  • resize: true — позволяет Masonry автоматически вызывать пересчет макета при изменении размеров окна браузера.
  • По умолчанию эта опция включена, но в некоторых версиях можно отключить для оптимизации производительности при большом количестве элементов.

Внутренний механизм

Masonry использует событие window.resize для отслеживания изменения ширины контейнера. При каждом вызове происходит:

  1. Проверка ширины контейнера.
  2. Вычисление числа колонок исходя из columnWidth и ширины контейнера.
  3. Перераспределение всех элементов по колонкам с учетом gutter.

Принудительное обновление сетки

Иногда элементы сетки изменяются динамически (например, при загрузке изображений или изменении контента). В таких случаях автоматическое отслеживание resize может не сработать, и требуется ручной вызов метода layout():

msnry.layout();
  • layout() пересчитывает позиции всех элементов без удаления или добавления новых.
  • Может использоваться после асинхронных операций, например, загрузки изображений через imagesLoaded.
imagesLoaded(grid, function() {
  msnry.layout();
});

Оптимизация при изменении размеров окна

Для больших сеток постоянный пересчет при каждом событии resize может снижать производительность. Рекомендуется использовать debounce, чтобы ограничить частоту вызовов layout():

function debounce(fn, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

window.addEventListener('resize', debounce(function() {
  msnry.layout();
}, 200));
  • Это предотвращает чрезмерное выполнение пересчета при быстром изменении размеров окна.
  • Значение задержки (delay) подбирается в зависимости от требований к отзывчивости сетки.

Обработка изменения размеров элементов

Если элементы сетки могут изменять свои размеры динамически (например, текстовый блок увеличился по высоте), Masonry не отслеживает эти изменения автоматически. В этом случае нужно:

  1. Обновить размеры элементов с помощью msnry.elementSize() — в новых версиях Masonry это реализуется через пересчет ширины и высоты контейнера элемента.
  2. Вызвать метод layout() для перераспределения:
var item = document.querySelector('.grid-item');
item.style.height = '300px'; // динамическое изменение
msnry.layout();

Настройка columnWidth для адаптивных сеток

Для корректной работы при изменении размеров окна важно грамотно задать columnWidth:

  • Можно указать фиксированное число пикселей.
  • Можно использовать элемент-контейнер как columnWidth для адаптивного расчета:
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  gutter: 10,
  percentPosition: true
});
  • .grid-sizer служит эталонной шириной колонки.
  • percentPosition: true позволяет Masonry использовать проценты вместо пикселей, что улучшает адаптивность.

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

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

imagesLoaded(grid, function() {
  msnry.layout();
});
  • Гарантирует, что Masonry пересчитает макет только после полной загрузки изображений.
  • Исключает визуальные «прыжки» элементов при изменении высоты.

Выводы по resize в Masonry

  • resize: true обеспечивает базовый автоматический пересчет при изменении окна.
  • Динамическое изменение размеров элементов требует ручного вызова layout().
  • Для больших сеток рекомендуется использовать debounce на событии resize.
  • Адаптивные сетки требуют корректной настройки columnWidth и percentPosition.
  • Для элементов с асинхронно загружаемым контентом обязательно использовать пересчет после завершения загрузки.

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

Оглавление