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

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

Основные параметры для адаптивности:

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

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

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

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

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

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

.grid-sizer {
  width: 33.333%; /* 3 колонки на больших экранах */
}

@media (max-width: 1024px) {
  .grid-sizer {
    width: 50%; /* 2 колонки на планшетах */
  }
}

@media (max-width: 600px) {
  .grid-sizer {
    width: 100%; /* 1 колонка на мобильных */
  }
}

Masonry автоматически перерассчитывает расположение элементов при изменении размера окна, если вызван метод layout().

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

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

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

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

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

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

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

  1. Использование percentPosition: позволяет Masonry рассчитывать позиции без пересчёта при каждом изменении размера окна, что снижает нагрузку на рендер.
  2. Минимизация перерасчётов: вызов layout() только при необходимости (например, после завершения загрузки контента).
  3. Кэширование ширины колонок: задавать columnWidth через CSS-классы .grid-sizer, чтобы не вычислять ширину динамически в JS.
  4. Дебаунс событий resize: при частых изменениях размера окна целесообразно использовать дебаунс, чтобы layout() не вызывался слишком часто:
let resizeTimeout;
window.addEventListener('resize', function() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function() {
    msnry.layout();
  }, 200);
});

Сетка с переменной высотой элементов

Masonry автоматически учитывает высоту каждого элемента, поэтому идеально подходит для карточек с контентом разной длины. Для адаптивности можно использовать относительные единицы (em, %) или flex-блоки внутри .grid-item, чтобы внутреннее содержимое подстраивалось под ширину колонки, сохраняя гармоничное заполнение сетки.

Интеграция с CSS Grid и Flexbox

Masonry хорошо работает совместно с CSS Grid, используя .grid-sizer для задания базовой ширины колонок. При этом внутренние элементы можно оформлять с Flexbox для равномерного распределения контента внутри карточек. Такой подход позволяет сочетать преимущества CSS-адаптивности и алгоритма Masonry без потери производительности.

Выводы по адаптивной оптимизации

  • Использовать процентные ширины и .grid-sizer для гибкости сетки.
  • Применять медиазапросы для изменения количества колонок под разные экраны.
  • Обновлять сетку через layout() или appended() после динамических изменений.
  • Минимизировать перерасчёты и оптимизировать события resize через дебаунс.
  • Держать элементы с переменной высотой под контролем с помощью внутренних Flexbox или относительных единиц.

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

Оглавление