Ориентация устройства

Для использования Masonry необходимо подключить библиотеку к проекту. Это можно сделать через CDN или пакетный менеджер, например npm. После подключения создаётся объект Masonry, которому передаётся контейнер с элементами и набор настроек. Пример инициализации:

import Masonry from 'masonry-layout';

const grid = document.querySelector('.grid');
const masonry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  percentPosition: true
});

Ключевые параметры:

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

Динамическая перестройка сетки при изменении ориентации

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

window.addEventListener('orientationchange', () => {
  masonry.layout();
});

При этом важно учитывать, что на некоторых устройствах orientationchange срабатывает до полной переразметки DOM, поэтому часто рекомендуется добавлять небольшую задержку:

window.addEventListener('orientationchange', () => {
  setTimeout(() => masonry.layout(), 200);
});

Адаптивная ширина колонок

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

.column-sizer {
  width: 25%;
}

И в настройках Masonry указывать:

columnWidth: '.column-sizer',
percentPosition: true

Такой подход позволяет сетке автоматически подстраиваться под ширину контейнера при портретной или ландшафтной ориентации.

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

При частых изменениях ориентации или размера окна перерасчёт сетки может быть ресурсоёмким. Чтобы уменьшить нагрузку, используют дебаунсинг события:

let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => masonry.layout(), 250);
});

Это предотвращает множественные вызовы layout() за короткий промежуток времени, обеспечивая плавную работу интерфейса.

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

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

import imagesLoaded from 'imagesloaded';

imagesLoaded(grid, () => {
  masonry.layout();
});

Это гарантирует корректное позиционирование элементов вне зависимости от ориентации устройства.

Перестройка отдельных элементов

Иногда требуется изменить размеры отдельных элементов при смене ориентации. В этом случае Masonry предоставляет метод stamp() и unstamp(), позволяющий временно исключать элементы из расчёта:

const specialItem = document.querySelector('.special');
masonry.stamp(specialItem);
// Изменение размеров
masonry.unstamp(specialItem);
masonry.layout();

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

Учет viewport и медиазапросов

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

@media (orientation: portrait) {
  .column-sizer { width: 50%; }
}

@media (orientation: landscape) {
  .column-sizer { width: 25%; }
}

После изменения стилей при смене ориентации нужно вызвать masonry.layout() для применения новых размеров.

Поддержка мобильных браузеров

На мобильных устройствах события orientationchange могут срабатывать с разной задержкой и различной частотой. Рекомендуется комбинировать их с resize, чтобы Masonry корректно перестраивал сетку во всех случаях:

function updateLayout() {
  masonry.layout();
}

window.addEventListener('resize', updateLayout);
window.addEventListener('orientationchange', updateLayout);

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

Использование Masonry с фреймворками

При работе с фреймворками, такими как React или Vue, Masonry инициализируется после рендера компонентов. Для пересчёта сетки при смене ориентации используют аналогичные методы:

useEffect(() => {
  const masonry = new Masonry(gridRef.current, { /* настройки */ });
  
  const handleOrientationChange = () => masonry.layout();
  window.addEventListener('orientationchange', handleOrientationChange);

  return () => window.removeEventListener('orientationchange', handleOrientationChange);
}, []);

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

Итоговые рекомендации по ориентации

  • Использовать процентные размеры колонок для адаптивности.
  • Перестраивать сетку через layout() при событиях orientationchange и resize.
  • Обеспечивать загрузку изображений перед расчетом сетки.
  • Применять дебаунсинг для оптимизации производительности.
  • Использовать медиазапросы для управления шириной колонок под разные ориентации.

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

Оглавление