appended

Для начала работы с Packery необходимо подключить саму библиотеку и её зависимости. Packery основан на библиотеке Draggabilly для поддержки перетаскивания элементов, поэтому рекомендуется подключить её для расширенной функциональности. Подключение может выполняться как через CDN, так и через менеджеры пакетов, такие как npm.

Пример подключения через CDN:

<link rel="stylesheet" href="https://unpkg.com/packery@2/dist/packery.pkgd.min.css">
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>

Пример установки через npm:

npm install packery
npm install draggabilly

После установки через npm библиотеку можно импортировать в проект:

import Packery from 'packery';
import Draggabilly from 'draggabilly';

Инициализация сетки

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

const grid = document.querySelector('.grid');

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

Ключевые параметры:

  • itemSelector — CSS-селектор элементов сетки. Обязательный параметр.
  • gutter — расстояние между элементами (в пикселях).
  • columnWidth — ширина колонок, может быть числом или элементом.
  • percentPosition — если true, размеры элементов рассчитываются в процентах относительно контейнера.
  • stamp — элементы с этим классом будут исключены из автоматического расположения сетки.

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

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

const newItems = document.createElement('div');
newItems.className = 'grid-item';
newItems.textContent = 'Новый элемент';

grid.appendChild(newItems);

pckry.appended(newItems);

Особенности метода appended:

  • После добавления новых элементов автоматически пересчитывается расположение всех элементов.
  • Можно добавлять несколько элементов одновременно, передавая массив или NodeList:
const moreItems = document.querySelectorAll('.new-items');
pckry.appended(moreItems);
  • Метод не добавляет элементы в DOM; он только уведомляет Packery о новых элементах. Поэтому перед использованием необходимо вставить элементы в контейнер.

Перетаскивание элементов

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

const itemElems = pckry.getItemElements();
itemElems.forEach((itemElem) => {
  const draggie = new Draggabilly(itemElem);
  pckry.bindDraggabillyEvents(draggie);
});

Особенности:

  • Каждый элемент должен быть инициализирован отдельно через Draggabilly.
  • После привязки события Packery автоматически пересчитывает расположение при перемещении элементов.

Обновление и перераспределение сетки

При динамическом изменении размеров или добавлении контента может потребоваться перераспределение элементов:

pckry.layout();

Важно помнить:

  • Метод layout() пересчитывает позиции всех элементов в сетке.
  • Для отдельных элементов можно использовать метод fit, чтобы переместить их в свободное место:
pckry.fit(newItems[0]);

Удаление элементов

Packery предоставляет возможность удаления элементов из сетки и DOM:

pckry.remove(newItems);
pckry.layout();
newItems.forEach(item => item.parentNode.removeChild(item));

Пошаговая логика:

  1. Метод remove() уведомляет Packery, что элемент больше не участвует в сетке.
  2. Метод layout() пересчитывает расположение оставшихся элементов.
  3. Элемент удаляется из DOM.

Использование событий

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

pckry.on('layoutComplete', (items) => {
  console.log('Сетка обновлена', items);
});

pckry.on('removeComplete', (items) => {
  console.log('Элементы удалены', items);
});

Популярные события:

  • layoutComplete — после пересчёта сетки.
  • dragItemPositioned — после перемещения элемента.
  • removeComplete — после удаления элементов.
  • fitComplete — после размещения элемента методом fit.

Stamp и исключённые элементы

Элементы с классом stamp можно использовать для создания “неподвижных” блоков, вокруг которых Packery будет располагать остальные:

const stampElem = document.querySelector('.stamp');
pckry.stamp(stampElem);
pckry.layout();

Особенности работы:

  • Stamp исключается из пересчёта позиции другими элементами.
  • Можно добавлять несколько stamp-элементов одновременно, передавая массив.

Адаптивные сетки

Для создания адаптивных сеток с процентными колонками рекомендуется использовать параметр percentPosition и CSS:

.grid {
  width: 100%;
}

.grid-item {
  width: 30%;
}

При изменении ширины окна Packery автоматически перераспределяет элементы:

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

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

  • Batch append: добавлять несколько элементов за один вызов appended.
  • Использовать requestAnimationFrame при частых обновлениях размеров или динамическом контенте.
  • Минимизировать пересчёт layout: вызывать layout() только после всех изменений.

Эти возможности делают Packery мощным инструментом для создания динамических и адаптивных сеток, управления позициями элементов и интеграции с drag-and-drop функционалом в современных интерфейсах.

Оглавление