Работа с responsive элементами

Библиотека Muuri предоставляет гибкую систему для создания динамических сеток, которые автоматически перестраиваются при изменении размеров контейнера или количества элементов. Работа с responsive элементами строится вокруг нескольких ключевых концепций: адаптивная ширина и высота элементов, перестройка сетки при изменении размеров окна, и динамическая фильтрация и сортировка элементов.

Адаптивные размеры элементов

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

  • Использование процентов в ширине элементов (width: 25%) позволяет равномерно распределять элементы в строке.
  • Использование box-sizing: border-box предотвращает искажения размеров при добавлении отступов и границ.
  • Гибкая высота (height: auto) совместно с изображениями, имеющими max-width: 100%, позволяет элементам корректно масштабироваться по содержимому.
.item {
  width: 25%;
  padding: 10px;
  box-sizing: border-box;
}

.item img {
  width: 100%;
  height: auto;
  display: block;
}

При такой настройке Muuri автоматически учитывает размеры элементов и выстраивает их в сетку, которая изменяет количество колонок в зависимости от ширины контейнера.

Перестройка сетки при изменении размеров окна

Для responsive сеток критически важно, чтобы Muuri обновлял положение элементов при изменении размера контейнера. Для этого используется метод refreshItems() и событие onResize или обработка события window.resize.

const grid = new Muuri('.grid', {
  dragEnabled: true,
  layout: {
    rounding: false // точное позиционирование элементов
  }
});

window.addEventListener('resize', () => {
  grid.refreshItems().layout();
});
  • refreshItems() обновляет внутренние размеры элементов.
  • layout() пересчитывает позиции элементов в сетке.
  • Параметр rounding: false предотвращает округление координат, что важно для точного соответствия сетки и адаптивных размеров.

Использование колоночной адаптации

Для адаптивной сетки часто используют динамическое количество колонок в зависимости от ширины контейнера. В Muuri это реализуется через настройку layout и метод layoutOnResize: true.

const grid = new Muuri('.grid', {
  layout: {
    fillGaps: true,
    horizontal: false,
    alignRight: false,
    alignBottom: false,
    rounding: false
  }
});
  • fillGaps: true — элементы заполняют пустые промежутки, возникающие при разной высоте.
  • horizontal: false — вертикальное размещение элементов, которое проще масштабировать при адаптивном дизайне.

Также можно вручную пересчитывать количество колонок при определённых breakpoints:

function updateColumns() {
  const width = window.innerWidth;
  let columns;

  if (width < 600) columns = 1;
  else if (width < 900) columns = 2;
  else columns = 3;

  document.querySelectorAll('.item').forEach(item => {
    item.style.width = `${100 / columns}%`;
  });

  grid.refreshItems().layout();
}

window.addEventListener('resize', updateColumns);
updateColumns();

Работа с фильтрацией и сортировкой на responsive сетке

Responsive сетка часто требует динамической фильтрации или сортировки элементов, например, для показа элементов в зависимости от размеров экрана или контента. Muuri предоставляет методы filter() и sort().

// Фильтрация элементов по data-атрибуту
grid.filter(item => {
  return window.innerWidth > 800 ? true : item.getElement().dataset.type !== 'large';
});

// Сортировка по data-атрибуту
grid.sort((a, b) => {
  return a.getElement().dataset.order - b.getElement().dataset.order;
});
  • filter() принимает функцию, возвращающую true для отображаемых элементов.
  • sort() переставляет элементы с анимацией, сохраняя адаптивность сетки.

Эти методы можно вызывать после resize для корректного отображения элементов в responsive-макете.

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

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

  • Использовать layoutOnResize: false и вручную вызывать refreshItems().layout() только при необходимости.
  • Минимизировать количество слушателей resize и использовать дебаунсинг:
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    updateColumns();
  }, 150);
});
  • Скрывать неактуальные элементы вместо их удаления, чтобы минимизировать перерисовку.

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

Muuri может работать вместе с CSS Grid и Flexbox, но при responsive сетках предпочтение стоит отдавать Flexbox для простоты динамического изменения ширины элементов.

  • Flexbox позволяет легко устанавливать процентные размеры и сохранять адаптивность.
  • CSS Grid удобен для фиксированных шаблонов, но требует пересчета размеров элементов при изменении числа колонок.
.grid {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 0 25%;
}

В сочетании с Muuri это обеспечивает гибкую сетку, которая плавно перестраивается на любых разрешениях.

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

Оглавление