Выбор контейнера

В Packery контейнер — это основной элемент, внутри которого располагаются все сеточные блоки (items). Контейнер играет ключевую роль, так как от его параметров зависят выравнивание, поведение при добавлении или удалении элементов, а также взаимодействие с методами библиотекой. В качестве контейнера может использоваться любой HTML-элемент, поддерживающий позиционирование элементов внутри себя, чаще всего это <div>.

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

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10
});

Здесь .grid — контейнер, внутри которого Packery располагает элементы с классом .grid-item. Параметр gutter задаёт отступ между элементами.

Критерии выбора контейнера

  1. Размер контейнера Контейнер должен иметь явные размеры или быть ограничен стилями, иначе Packery будет рассчитывать расположение элементов на основе текущей ширины родительского элемента, что может привести к непредсказуемому поведению при динамическом изменении размера окна. Рекомендуется задавать контейнеру ширину через CSS:
.grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

  1. Позиционирование Packery использует absolute для расположения блоков внутри контейнера. Контейнер должен иметь position: relative или position: absolute для корректного позиционирования дочерних элементов. Без этого элементы будут позиционироваться относительно ближайшего предка с position, что нарушит сетку.

  2. Гибкость при ресайзе Контейнер лучше выбирать так, чтобы его ширина могла изменяться динамически (например, в адаптивной верстке). Packery способен автоматически перерасчитывать положение элементов при изменении размеров контейнера при вызове метода layout.

window.addEventListener('resize', function() {
  pckry.layout();
});

Особенности работы с разными типами контейнеров

  • Фиксированная ширина: элементы располагаются строго по сетке, легко прогнозировать их расположение. Используется для галерей с фиксированными блоками.
  • Адаптивная ширина: позволяет блокам занимать доступное пространство, но требует динамического пересчета сетки. Контейнер с гибкой шириной подходит для responsive-дизайна.
  • Вложенные контейнеры: можно использовать Packery внутри контейнера, который сам находится в другой сетке. При этом важно правильно инициализировать Packery отдельно для каждого уровня.

Структура HTML-контейнера

Правильная структура контейнера обеспечивает корректное поведение Packery:

<div class="grid">
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
  <div class="grid-item">Элемент 3</div>
</div>

Ключевые моменты:

  • grid — контейнер, имеет position: relative
  • grid-item — элементы сетки, Packery автоматически назначает им position: absolute и вычисляет координаты.
  • Допустимо добавление динамических элементов через JS с последующим вызовом метода appended или layout.

Методы работы с контейнером

  1. Инициализация Контейнер передается в конструктор Packery:
var pckry = new Packery(document.querySelector('.grid'), {
  itemSelector: '.grid-item',
  gutter: 10
});
  1. Перерасчет расположения элементов Метод layout пересчитывает позиции блоков в контейнере:
pckry.layout();
  1. Добавление элементов в контейнер Новые элементы вставляются и упорядочиваются:
var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
pckry.appended(newItem);
  1. Удаление элементов После удаления элемента необходимо вызвать layout:
grid.removeChild(item);
pckry.layout();

Рекомендации по оптимизации контейнера

  • Контейнер лучше выбирать с минимальной вложенностью, чтобы Packery не тратил лишние ресурсы на вычисление offset-ов родительских элементов.
  • Для больших сеток рекомендуется заранее задавать высоту элементов или использовать изображения с известными размерами, чтобы избежать дергания блоков при загрузке контента.
  • Контейнер с адаптивной шириной требует подписки на событие resize и вызова layout, иначе сетка будет некорректной при изменении ширины окна.

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

Оглавление