Изменения в API

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

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

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

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

В новых версиях API добавлена поддержка метода Packery.data, который позволяет связывать DOM-элемент с экземпляром сетки, обеспечивая более безопасный доступ к объекту:

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

// Получение экземпляра через DOM-элемент
var instance = Packery.data(grid);

Это изменение делает код более читаемым и предотвращает ошибки при работе с несколькими сетками на одной странице.

Управление элементами

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

Ранее добавление элементов выполнялось через метод appended:

pckry.appended(newElements);
pckry.layout();

С новой версией API рекомендуется использовать метод addItems, который сначала регистрирует элементы в системе Packery, а затем позволяет вызвать их раскладку через layout:

pckry.addItems(newElements);
pckry.layout();

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

Удаление элементов теперь реализуется через remove с обязательным вызовом layout для перерасчета сетки:

pckry.remove([elementToRemove]);
pckry.layout();

Отличие от старого API заключается в явном управлении массивом элементов и необходимости обновления сетки вручную.

Настройка поведения

Параметр gutter

В последних версиях API параметр gutter стал поддерживать динамические вычисления через функцию:

var pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: function(itemElem) {
    return parseInt(itemElem.dataset.gutter, 10);
  }
});

Это позволяет задавать разные отступы для каждого элемента, повышая гибкость сетки.

Параметр percentPosition

Опция percentPosition теперь корректно учитывает изменения размеров контейнера при ресайзе, что улучшает отзывчивость сетки:

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

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

События сетки были переработаны для унификации с остальными библиотеками типа Draggable и Masonry. Основные события:

  • layoutComplete — вызывается после завершения раскладки элементов.
  • removeComplete — срабатывает после удаления элементов.
  • dragItemPositioned — интеграция с Draggabilly для отслеживания позиции перетаскиваемого элемента.
pckry.on('layoutComplete', function(laidOutItems) {
  console.log('Раскладка завершена', laidOutItems);
});

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

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

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

Ранее для перетаскивания использовался устаревший packery-draggabilly.js. Новый API поддерживает нативную интеграцию через метод bindDraggabillyEvents:

var draggies = [];
grid.querySelectorAll('.grid-item').forEach(function(item) {
  var draggie = new Draggabilly(item);
  pckry.bindDraggabillyEvents(draggie);
  draggies.push(draggie);
});

Это изменение упрощает код и устраняет необходимость сторонних патчей для поддержки drag & drop.

Методы для перерасчета сетки

Packery теперь предлагает более явные методы перерасчета:

  • layout() — перерасчет всех элементов.
  • reloadItems() — обновление списка элементов сетки без изменения позиции.
  • stamp(elements) — “закрепление” определенных элементов, исключая их из раскладки.
  • unstamp(elements) — отмена закрепления.
pckry.stamp(document.querySelector('.header'));
pckry.layout();

Эти методы заменяют старые хаки с прямым манипулированием DOM и обеспечивают консистентное поведение сетки при динамических изменениях.

Итоговые ключевые изменения

  1. Инициализация через Packery.data для безопасного доступа к экземплярам.
  2. Методы addItems и remove вместо прямых вызовов appended и удаления DOM.
  3. Динамические gutter и процентное позиционирование для адаптивных сеток.
  4. Унифицированные события с массивами элементов вместо одиночных объектов.
  5. Нативная интеграция с Draggabilly через bindDraggabillyEvents.
  6. Явные методы перерасчета и закрепления элементов (layout, reloadItems, stamp, unstamp).

Эти изменения делают API более модульным, предсказуемым и совместимым с современными стандартами JavaScript.

Оглавление