Работа с DOM

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

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

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

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

Инициализация происходит через конструктор Packery:

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

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

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

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

Packery поддерживает работу с элементами DOM после инициализации. Для добавления нового элемента используется метод appended:

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

Для удаления элемента используется комбинация методов remove и layout:

var itemToRemove = document.querySelector('.grid-item:nth-child(2)');
pckry.remove(itemToRemove);
pckry.layout();

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

  • Важно вызывать layout() после добавления или удаления, чтобы Packery пересчитал позиции элементов.
  • Методы appended и remove работают с одиночными элементами и массивами.

Перемещение элементов

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

pckry.shift({
  x: 100,
  y: 50,
  item: document.querySelector('.grid-item:first-child')
});

Метод shift позволяет смещать элемент относительно его текущей позиции. Для анимации используется CSS-переход, заданный через transition.

Сортировка и фильтрация элементов

Packery не имеет встроенной сортировки, но её можно реализовать через манипуляции с DOM и последующий вызов layout():

var items = Array.from(grid.children);
items.sort((a, b) => a.textContent - b.textContent);
items.forEach(item => grid.appendChild(item));
pckry.layout();

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

  • Сортировка изменяет порядок в DOM, после чего Packery пересчитывает позиции.
  • Фильтрацию элементов можно реализовать через display: none и повторный вызов layout().

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

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

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
imagesLoaded(grid, function() {
  pckry.layout();
});

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

События Packery

Packery генерирует события для различных операций:

  • layoutComplete — вызывается после завершения компоновки.
  • dragItemPositioned — вызывается после перемещения элемента (при использовании Draggabilly).
  • removeComplete — вызывается после удаления элементов.

Пример подписки на событие:

pckry.on('layoutComplete', function() {
  console.log('Компоновка завершена');
});

Интеграция с Draggabilly

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

<script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>
var itemElems = grid.querySelectorAll('.grid-item');
itemElems.forEach(function(itemElem) {
  var draggie = new Draggabilly(itemElem);
  pckry.bindDraggabillyEvents(draggie);
});

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

  • Перетаскивание обновляет позиции элементов в Packery автоматически.
  • Можно комбинировать с фильтрацией и сортировкой без нарушения сетки.

Оптимизация работы с DOM

  1. Фрагменты документа (DocumentFragment) — добавление большого количества элементов через appendChild в фрагмент, а затем вставка фрагмента в DOM уменьшает количество перерисовок.
  2. Debounce вызовов layout() — при множественных изменениях элементов лучше откладывать вызов компоновки через setTimeout или функции debounce.
  3. Минимизация размеров элементов — Packery рассчитывает позиции на основе размеров элементов, поэтому заранее определенные размеры ускоряют работу.

Расширенные настройки

  • originLeft и originTop — задают направление компоновки.
  • transitionDuration — скорость анимации в CSS-секундах.
  • stamp — элементы, которые не будут перемещаться, но учитываются при размещении остальных.

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

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

Элемент с классом .stamp остается на месте, а остальные элементы Packery располагает вокруг него.

Заключение по работе с DOM

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

Оглавление