E-commerce каталоги

Masonry — это библиотека для динамического позиционирования элементов сетки, которая позволяет создавать плотные, «кирпичные» макеты с переменной высотой карточек. В контексте E-commerce каталога она особенно полезна для отображения товаров с различными размерами изображений и описаний, обеспечивая аккуратное распределение контента без пустых промежутков.

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

Установка и подключение Masonry

Masonry может быть подключен несколькими способами: через npm или CDN.

Через npm:

npm install masonry-layout

Через CDN:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

После подключения необходимо инициализировать сетку:

const grid = document.querySelector('.grid');
const masonry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  gutter: 20
});
  • itemSelector — селектор элементов, которые будут расположены в сетке.
  • columnWidth — базовая ширина колонки; может быть задана через отдельный элемент .grid-sizer.
  • percentPosition — использование процентных значений ширины колонок.
  • gutter — расстояние между элементами.

Структура HTML для каталога товаров

Правильная структура HTML важна для корректной работы Masonry:

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

.grid-sizer используется для расчета ширины колонок. .grid-item — карточка товара, которая может иметь переменную высоту.

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

Для E-commerce важно, чтобы Masonry корректно рассчитывал высоту элементов после загрузки изображений. Для этого применяется библиотека imagesLoaded:

npm install imagesloaded
imagesLoaded(grid, function() {
  masonry.layout();
});

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

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

Для больших каталогов часто используется ленивое подгружение (infinite scroll). Masonry позволяет добавлять новые элементы в уже существующую сетку:

const newItems = document.querySelectorAll('.new-grid-item');
grid.append(...newItems);
masonry.appended(newItems);
  • append добавляет элементы в DOM.
  • masonry.appended() сообщает Masonry о новых элементах, чтобы пересчитать позиции.

Адаптивность и медиазапросы

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

.grid-item {
  width: 100%;
}

@media (min-width: 768px) {
  .grid-sizer, .grid-item {
    width: 48%;
  }
}

@media (min-width: 1200px) {
  .grid-sizer, .grid-item {
    width: 30%;
  }
}

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

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

Для больших каталогов важно оптимизировать Masonry:

  • Использовать percentPosition: true для снижения перерасчетов размеров при ресайзе.
  • Минимизировать количество DOM-элементов на странице одновременно.
  • Объединять сетку с виртуальным скроллом при тысячах товаров.
  • Устанавливать transitionDuration для плавного перемещения элементов без лишних перерисовок.
const masonry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  gutter: 20,
  transitionDuration: '0.3s'
});

Взаимодействие с фильтрами и сортировкой

Для каталогов важно интегрировать Masonry с фильтрацией и сортировкой товаров. После изменения набора элементов необходимо заново инициировать пересчет:

const filteredItems = document.querySelectorAll('.grid-item.filtered');
grid.innerHTML = '';
grid.append(...filteredItems);
masonry.reloadItems();
masonry.layout();
  • reloadItems() пересчитывает список элементов.
  • layout() перестраивает сетку на основе новых данных.

Расширенные возможности

Masonry поддерживает:

  • Drag-and-drop карточек с использованием сторонних библиотек.
  • Анимации при появлении и удалении товаров, что делает каталог более живым.
  • Поддержку нестандартной высоты и спанов элементов, позволяя комбинировать крупные промо-блоки с обычными карточками.

Пример увеличенного блока для акции:

.grid-item.promo {
  grid-column: span 2;
  height: 400px;
}
masonry.layout();

Такой блок автоматически займет нужное количество колонок и будет вписан в общую сетку без нарушения визуальной гармонии.

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

Оглавление