Ресайз окна браузера

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

Автоматическое обновление сетки при изменении размеров

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

Пример инициализации с автоматическим пересчетом:

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

// Пересчет при загрузке изображений
imagesLoaded(grid, function() {
  msnry.layout();
});

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

Использование слушателя события resize

Для ручного контроля можно добавлять обработчик события resize:

window.addEventListener('resize', function() {
  msnry.layout();
});

Этот подход полезен, когда сетка меняется динамически, либо если Masonry не пересчитывает позиции автоматически из-за внешних CSS-трансформаций или анимаций.

Оптимизация пересчета

При частом изменении размеров окна пересчет layout() может вызывать тормоза, особенно при большом количестве элементов. Чтобы уменьшить нагрузку, применяется дебаунсинг:

function debounce(fn, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(fn, delay);
  };
}

window.addEventListener('resize', debounce(function() {
  msnry.layout();
}, 200));

Здесь пересчет выполняется не при каждом пикселе изменения, а с задержкой 200 мс после окончания изменения размеров.

Динамическое изменение ширины колонок

Для адаптивного дизайна важно корректно изменять ширину колонок Masonry при ресайзе. Использование CSS-переменных или медиазапросов позволяет Masonry корректно перераспределять элементы:

.grid-sizer {
  width: 25%;
}

@media (max-width: 1200px) {
  .grid-sizer {
    width: 33.33%;
  }
}

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

С помощью percentPosition: true Masonry учитывает относительные размеры колонок и автоматически перестраивает сетку при изменении ширины контейнера.

Добавление и удаление элементов после ресайза

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

var newItem = document.createElement('div');
newItem.classList.add('grid-item');
grid.appendChild(newItem);

imagesLoaded(newItem, function() {
  msnry.appended(newItem);
  msnry.layout();
});

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

Обработка скрытых или изменяющихся элементов

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

function expandItem(item) {
  item.classList.toggle('expanded');
  msnry.layout();
}

Так Masonry корректно перераспределяет соседние элементы, предотвращая наложение или появление больших пустых промежутков.

Выводы по работе Masonry при ресайзе

  • Использовать layout() для пересчета позиций после изменения размеров контейнера или контента.
  • Применять imagesLoaded для корректного расчета сетки при наличии изображений.
  • Для высокой производительности использовать дебаунсинг при обработке события resize.
  • Настраивать ширину колонок через CSS и включать percentPosition: true.
  • Для динамически добавленных элементов применять метод appended вместо полного пересчета всех позиций.
  • Пересчет сетки обязателен при изменении размеров или видимости элементов после их вставки или анимации.

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

Оглавление