Адаптация количества колонок

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

Опция layout и управление колонками

Свойство layout указывает параметры построения сетки. Для адаптивного количества колонок ключевыми являются опции:

  • fillGaps – если установлено в true, элементы автоматически заполняют свободные промежутки, создавая плотную сетку.
  • horizontal – управляет горизонтальной ориентацией, что важно при адаптивных сетках.
  • alignRight и alignBottom – позволяют выравнивать элементы при изменении числа колонок.

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

const grid = new Muuri('.grid', {
  layout: {
    fillGaps: true,
    horizontal: false,
    alignRight: false,
    alignBottom: false,
  }
});

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

Динамическое количество колонок

Для адаптивного изменения количества колонок чаще всего используют комбинацию CSS и JavaScript. Подход заключается в вычислении ширины контейнера и делении её на минимальную ширину элемента.

Пример функции для расчета числа колонок:

function calculateColumns(containerWidth, itemMinWidth) {
  return Math.floor(containerWidth / itemMinWidth);
}

После расчета нового количества колонок можно обновить сетку через метод grid.refreshItems().layout().

function updateGridColumns() {
  const container = document.querySelector('.grid');
  const containerWidth = container.clientWidth;
  const itemMinWidth = 200; // минимальная ширина элемента
  const columns = calculateColumns(containerWidth, itemMinWidth);
  
  grid.layout(true); // пересчет расположения элементов
}

Подписка на событие изменения размера окна позволяет сетке оставаться адаптивной:

window.addEventListener('resize', updateGridColumns);
updateGridColumns(); // первичная установка

Использование CSS Grid для упрощения адаптивности

Хотя Muuri сам управляет позиционированием элементов, можно комбинировать его с CSS Grid для контроля числа колонок. В CSS задаются правила, позволяющие автоматически изменять количество колонок в зависимости от ширины контейнера:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

Преимущества такого подхода:

  • Автоматическая подгонка элементов под ширину контейнера.
  • Совместимость с Muuri, который сохраняет контроль над анимацией и упорядочиванием элементов.
  • Легкая интеграция медиа-запросов для изменения минимальной ширины элементов на разных устройствах.

Оптимизация при большом количестве элементов

Для сеток с сотнями элементов критично избегать лишних пересчетов layout. Эффективные приёмы:

  1. Дебаунс обработчика resize – предотвращает многократные вызовы при динамическом изменении окна:
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(updateGridColumns, 150);
});
  1. Использование layoutOnResize – встроенная опция Muuri для автоматического перерасчета сетки при изменении размеров контейнера:
const grid = new Muuri('.grid', {
  layout: {
    layoutOnResize: 100, // миллисекунды
  }
});
  1. Фильтрация и lazy-loading элементов – добавление элементов партиями снижает нагрузку на браузер и ускоряет перестройку сетки.

Гибридный подход: фиксированное и адаптивное число колонок

Иногда требуется, чтобы на десктопе было фиксированное количество колонок, а на мобильных устройствах сетка была адаптивной. Это реализуется через условную настройку минимальной ширины элементов и расчет количества колонок в JavaScript с проверкой window.innerWidth:

function getItemWidth() {
  if(window.innerWidth < 600) return 150; // мобильная версия
  if(window.innerWidth < 900) return 180; // планшет
  return 200; // десктоп
}

function updateGrid() {
  const itemWidth = getItemWidth();
  const containerWidth = document.querySelector('.grid').clientWidth;
  const columns = Math.floor(containerWidth / itemWidth);
  
  grid.refreshItems().layout();
}

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

Итоги работы с колонками в Muuri

  • Адаптивное количество колонок достигается через комбинацию layout, расчета ширины элементов и CSS Grid.
  • Автоматический пересчет при изменении размеров окна повышает удобство использования сетки.
  • Оптимизация больших сеток важна для производительности и плавности анимации.
  • Гибридный подход позволяет сочетать фиксированные и адаптивные колонки в одной сетке, улучшая UX на разных устройствах.

Контроль количества колонок в Muuri — это баланс между динамическими вычислениями, правильной конфигурацией сетки и эффективным использованием CSS для упрощения адаптивности.

Оглавление