Vanilla JavaScript

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

Подключение библиотеки

Для работы с Packery необходимо подключить скрипт и стили (если они требуются для оформления элементов). В простейшем варианте достаточно подключения через CDN:

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

После этого библиотека становится доступной через глобальный объект Packery.

Инициализация контейнера

Создание сетки начинается с выбора контейнера и элементов, которые будут участвовать в раскладке:

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

const pckry = new Packery(grid, {
  itemSelector: '.grid-item', // Селектор элементов сетки
  gutter: 10,                  // Отступ между элементами
  percentPosition: true        // Использование процентов для адаптивности
});

Ключевые опции:

  • itemSelector — CSS-селектор элементов внутри контейнера.
  • gutter — промежуток между элементами сетки. Может быть числом (пиксели) или строкой с CSS-единицей.
  • percentPosition — обеспечивает адаптивное расположение при изменении ширины контейнера.

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

Packery поддерживает добавление и удаление элементов после инициализации:

const newItem = document.createElement('div');
newItem.classList.add('grid-item');
grid.appendChild(newItem);

// Добавление нового элемента в сетку Packery
pckry.appended(newItem);

// Пересчёт расположения
pckry.layout();

Удаление элемента:

pckry.remove(newItem);
pckry.layout();

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

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

Packery тесно интегрируется с библиотекой Draggabilly, позволяя реализовать перетаскивание элементов:

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

Инициализация перетаскивания:

const items = grid.querySelectorAll('.grid-item');

items.forEach(item => {
  const draggie = new Draggabilly(item);
  pckry.bindDraggabillyEvents(draggie);
});

После этого элементы можно перемещать, а Packery будет автоматически перестраивать сетку, подгоняя соседние элементы.

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

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

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

Пример использования:

imagesLoaded(grid, function() {
  pckry.layout();
});

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

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

  • Использование percentPosition повышает адаптивность и уменьшает перерасчёт при ресайзе.
  • Минимизация количества элементов: слишком много элементов в DOM могут замедлить работу Packery.
  • Ленивая загрузка элементов с динамической подгрузкой через appended помогает поддерживать отзывчивость интерфейса.

События Packery

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

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

Пример:

pckry.on('layoutComplete', function() {
  console.log('Сетка перестроена');
});

События позволяют интегрировать Packery с другими частями интерфейса и анимациями.

Комбинирование с CSS-анимациями

Packery отлично работает с CSS-переходами и анимациями. Например, при удалении элемента можно задать плавное исчезновение через CSS:

.grid-item {
  transition: transform 0.3s, opacity 0.3s;
}
.grid-item.removed {
  opacity: 0;
  transform: scale(0.5);
}

И в Jav * aScript:

newItem.classList.add('removed');
setTimeout(() => {
  pckry.remove(newItem);
  pckry.layout();
}, 300);

Это создаёт плавный пользовательский опыт и позволяет избежать резких «прыжков» элементов.

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

Packery автоматически перестраивает сетку при изменении размеров контейнера, но иногда полезно вызвать layout вручную после изменений:

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

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

Интеграция с другими библиотеками

Packery может быть объединён с:

  • Infinite scroll — для динамической подгрузки карточек.
  • Lightbox — для галерей изображений.
  • Vue/React через рефы и прямой доступ к DOM-контейнеру.

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

Packery сочетает простоту использования с гибкостью, предоставляя полный контроль над размещением элементов. Комбинация с Draggabilly, imagesLoaded и CSS-анимациями создаёт мощный инструмент для построения адаптивных и интерактивных сеток в Vanilla JavaScript.

Оглавление