Переход с предыдущих версий

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

Изменения в инициализации

В ранних версиях Packery инициализация производилась через вызов конструктора с прямым указанием контейнера:

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

Начиная с версии 2.x:

  • Обязательное использование опций через объект. Контейнер можно передавать как строковый селектор или DOM-элемент, однако все параметры конфигурации должны быть явно определены.

  • Удалены устаревшие свойства isResizable и isAnimated. Их поведение теперь регулируется через CSS и события layoutComplete для анимации.

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

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

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

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

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

В предыдущих версиях методы append и remove напрямую модифицировали DOM и автоматически пересчитывали сетку. В новых версиях рекомендуется использовать явное обновление макета:

// Добавление нового элемента
var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
pckry.appended(newItem);
pckry.layout();

// Удаление элемента
var item = document.querySelector('.grid-item-to-remove');
pckry.remove(item);
pckry.layout();

Важно: вызов layout() после добавления или удаления элементов гарантирует корректное перераспределение всех блоков и предотвращает визуальные сдвиги.

Обновление содержимого

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

pckry.fit(item); // подгоняет элемент к сетке
pckry.layout();

Анимация и события

Ранее Packery имел встроенную анимацию через опцию isAnimated. В новых версиях анимация полностью делегируется CSS или сторонним библиотекам анимации (например, GSAP). Важные события:

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

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

pckry.on('layoutComplete', function(laidOutItems) {
  console.log('Сетка обновлена', laidOutItems.length, 'элементов');
});

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

Packery интегрируется с библиотекой Draggabilly для перетаскивания. В новых версиях важно использовать актуальный синтаксис:

var draggie = new Draggabilly(item);
pckry.bindDraggabillyEvents(draggie);

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

  • Изменения размеров элементов во время перетаскивания теперь корректно учитываются только при вызове pckry.layout().
  • Поддержка сетки с percentPosition: true требует правильного расчета координат при drag-операциях.

Поддержка адаптивных макетов

С переходом на новые версии важно пересмотреть правила адаптивного позиционирования:

  • Использовать percentPosition: true для элементов с шириной в процентах.
  • Следить за тем, чтобы контейнер имел position: relative или absolute.
  • Пересчет сетки при изменении размеров окна:
window.addEventListener('resize', function() {
  pckry.layout();
});

Совместимость с Masonry

Packery во многом совместим с Masonry, но есть отличия:

  • Packery ориентирован на оптимизацию заполнения пространства (bin-packing), Masonry просто выравнивает элементы по колонкам.
  • Методы Masonry (masonry.layout()) заменяются на pckry.layout().
  • При переходе важно проверить все кастомные колбэки, связанные с Masonry, и адаптировать их к событиям Packery (layoutComplete, dragItemPositioned).

Итоговые рекомендации при переходе

  1. Явно указывать все опции при инициализации.
  2. Обновлять макет после любых изменений DOM (appended, remove, fit).
  3. Использовать события Packery для отслеживания состояния сетки.
  4. Переписать устаревшие анимации на CSS или сторонние библиотеки.
  5. Обеспечить корректное поведение адаптивной сетки с percentPosition и обработкой ресайза.

Соблюдение этих правил позволяет плавно перейти с предыдущих версий Packery на новые без потери функциональности и визуальных артефактов.

Оглавление