Адаптивная сетка товаров

Muuri — это высокопроизводительная библиотека для создания динамических и интерактивных сеток в JavaScript. Основная сила Muuri заключается в её способности организовывать элементы сетки, обеспечивать плавную анимацию и поддерживать фильтрацию, сортировку и перетаскивание элементов. Для адаптивной сетки товаров это особенно важно, так как сетка должна гибко подстраиваться под размер экрана и количество элементов.

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

В этом примере создаётся сетка с включенной возможностью перетаскивания элементов. Опция fillGaps гарантирует, что пустые места в сетке автоматически заполняются при удалении или перемещении элементов.

Структура HTML для сетки

Элементы сетки должны иметь одинаковую обёртку и класс, по которому Muuri будет идентифицировать их в DOM. Пример структуры:

<div class="grid">
  <div class="item">
    <div class="item-content">
      <img src="product1.jpg" alt="Товар 1">
      <h3>Название товара 1</h3>
      <p>Описание товара 1</p>
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <img src="product2.jpg" alt="Товар 2">
      <h3>Название товара 2</h3>
      <p>Описание товара 2</p>
    </div>
  </div>
</div>

Каждый .item является отдельным элементом сетки, а .item-content отвечает за внутреннее содержимое. Такой подход упрощает применение CSS-анимаций и стилей.

Настройка адаптивной сетки через CSS

Для корректного отображения сетки на разных устройствах используются относительные размеры и медиазапросы. Пример базовой адаптивной сетки:

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.item {
  width: calc(25% - 20px);
  margin: 10px;
  transition: transform 0.3s, opacity 0.3s;
}

@media (max-width: 1200px) {
  .item {
    width: calc(33.33% - 20px);
  }
}

@media (max-width: 768px) {
  .item {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .item {
    width: 100%;
    margin: 5px 0;
  }
}

Такой подход обеспечивает плавное изменение количества колонок и размеров элементов в зависимости от ширины экрана.

Динамическое добавление и удаление товаров

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

const newItem = document.createElement('div');
newItem.classList.add('item');
newItem.innerHTML = `
  <div class="item-content">
    <img src="product3.jpg" alt="Товар 3">
    <h3>Название товара 3</h3>
    <p>Описание товара 3</p>
  </div>
`;

grid.add(newItem);
grid.layout(true);

Удаление элемента также возможно через метод remove:

const itemToRemove = grid.getItems()[0];
grid.remove(itemToRemove, { removeElements: true });

Флаг removeElements: true гарантирует удаление элемента из DOM после его удаления из сетки.

Фильтрация и сортировка товаров

Фильтрация осуществляется с помощью функции, возвращающей true для элементов, которые нужно показать, и false для скрытия. Пример фильтрации по категории:

function filterByCategory(category) {
  grid.filter(item => item.getElement().dataset.category === category);
}

Сортировка выполняется через метод sort:

grid.sort((a, b) => {
  return a.getElement().dataset.price - b.getElement().dataset.price;
});

Каждый элемент может иметь data-атрибуты, которые используются для фильтрации и сортировки (data-category, data-price и т.д.).

Обеспечение плавной анимации

Muuri автоматически анимирует перемещения элементов, но для лучшего эффекта можно настроить параметры анимации:

const grid = new Muuri('.grid', {
  layout: {
    duration: 400,
    easing: 'ease-in-out'
  },
  dragReleaseDuration: 400,
  dragReleaseEasing: 'ease'
});
  • duration — время анимации при перестроении сетки.
  • easing — тип кривой анимации.
  • dragReleaseDuration и dragReleaseEasing — параметры анимации при отпускании перетаскиваемого элемента.

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

  1. Использование виртуализации: отображать только видимые элементы на экране и подгружать остальные по мере скролла.
  2. Debounce на события ресайза и фильтрации, чтобы сетка не перестраивалась слишком часто.
  3. Минимизация CSS-трансформаций, которые могут замедлять анимацию при большом количестве элементов.

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

Muuri поддерживает события для взаимодействия с элементами:

grid.on('dragStart', (item) => {
  console.log('Начало перетаскивания', item);
});

grid.on('dragEnd', (item) => {
  console.log('Элемент перемещен', item);
});

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

Настройка перетаскивания и ограничения движения

Элементы сетки могут быть ограничены по направлению перемещения:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragAxis: 'y'
});
  • 'x' — только горизонтальное перемещение.
  • 'y' — только вертикальное перемещение.
  • null — свободное перемещение.

Также можно задавать события snap-to-grid для точного позиционирования элементов.

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

Для корректного отображения сетки при подгрузке изображений необходимо использовать imagesLoaded:

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

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

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

Оглавление