Что такое Packery

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

Ключевые особенности Packery:

Свободная укладка элементов: элементы могут иметь различную высоту и ширину, Packery автоматически подбирает их расположение, минимизируя пустое пространство.
Динамическая перестановка: при добавлении или удалении элементов сетка перестраивается автоматически.
События и взаимодействие: библиотека предоставляет события для отслеживания изменений, перемещения и добавления элементов, что позволяет интегрировать Packery с другими скриптами.
Поддержка drag-and-drop: с помощью интеграции с Draggabilly или native HTML5 drag-and-drop элементы можно перемещать мышью.

Инициализация и базовая настройка

Для работы с Packery необходимо подключить библиотеку и определить контейнер для элементов сетки.

Пример базовой структуры HTML:

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

Подключение Packery через npm или CDN:

<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>

Инициализация в Jav * aScript:

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

Разбор параметров:

itemSelector — селектор элементов, которые будут укладываться в сетку.
gutter — отступ между элементами, задаваемый в пикселях.
percentPosition — если true, элементы позиционируются с использованием процентов, что полезно для адаптивного дизайна.

Методы и функции

Packery предоставляет широкий набор методов для управления сеткой:

layout() — пересчитывает расположение элементов, полезно после изменения их размеров.
addItems(elements) — добавляет новые элементы в сетку и автоматически укладывает их.
remove(items) — удаляет элементы из сетки и обновляет расположение оставшихся.
fit(element) — размещает элемент на ближайшую доступную позицию без нарушения существующей структуры.
stamp(element) — отмечает элемент как «фиксированный», чтобы Packery учитывал его при укладке других элементов.

Пример добавления нового элемента:

const newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.textContent = 'Новый элемент';
grid.appendChild(newItem);
pckry.appended(newItem);

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

Packery отлично подходит для адаптивных макетов. Использование процентов для ширины элементов вместе с percentPosition: true обеспечивает корректную перестройку сетки при изменении размеров окна.

Изменение размера элементов можно отслеживать с помощью resize события:

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

Для элементов с динамическим контентом, например изображениями, важно вызывать layout() после загрузки контента:

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

Интеграция с Drag-and-Drop

Packery можно комбинировать с Draggabilly для создания интерактивных перемещаемых плиток:

const itemElems = grid.querySelectorAll('.grid-item');
itemElems.forEach((itemElem) => {
  const draggie = new Draggabilly(itemElem);
  pckry.bindDraggabillyEvents(draggie);
});

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

Работа с событиями

Packery поддерживает несколько событий для расширенной логики:

layoutComplete — вызывается после завершения перестройки сетки.
dragItemPositioned — срабатывает при завершении перемещения элемента.
removeComplete — после удаления элементов из сетки.

Пример обработки события:

pckry.on('layoutComplete', (items) => {
  console.log('Сетка перестроена', items.length, 'элементов');
});