Инициализация через JavaScript

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

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

Перед инициализацией необходимо убедиться, что подключены следующие файлы:

  1. Packery.js — основной скрипт библиотеки.
  2. imagesLoaded.js (опционально, но рекомендуется) — обеспечивает корректное расположение элементов после загрузки изображений.

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

<script src="path/to/packery.pkgd.min.js"></script>
<script src="path/to/imagesloaded.pkgd.min.js"></script>

Создание контейнера сетки

Packery работает с контейнером, внутри которого размещены элементы сетки. Для инициализации необходимо выбрать DOM-элемент контейнера и передать его конструктору Packery:

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

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

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

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

Оптимизация с imagesLoaded

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

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

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

Методы и управление сеткой

Packery предоставляет ряд методов для динамического управления элементами:

  • pckry.appended(elements) — добавление новых элементов в сетку с автоматическим перерасчетом позиции.
  • pckry.remove(elements) — удаление элементов из сетки с последующей перестройкой макета.
  • pckry.layout() — пересчет и перераспределение всех элементов сетки.
  • pckry.reloadItems() — обновление списка элементов, полезно при изменении DOM.

Пример добавления элемента:

var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);

pckry.appended(newItem);

Настройка анимации и transition

Packery использует CSS-трансформации для плавного перемещения элементов. Для включения анимации достаточно задать transition в CSS:

.grid-item {
  transition: transform 0.4s ease;
}

Это обеспечивает плавное смещение элементов при добавлении, удалении или изменении размеров.

Расширенные опции и события

Packery поддерживает гибкие настройки через объект опций:

  • originLeft / originTop — направление построения сетки.
  • stamp — элементы, которые будут оставаться на своих местах и не участвовать в выравнивании.
  • percentPosition — использование процентных значений для адаптивности.

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

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

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

Динамическое изменение параметров

Параметры можно менять после инициализации через option:

pckry.options.gutter = 20;
pckry.layout();

Это позволяет адаптировать сетку под новые условия без полной переинициализации.

Интеграция с drag-and-drop

Packery тесно интегрируется с Draggabilly для поддержки перетаскивания элементов. Пример:

var draggies = [];
var items = grid.querySelectorAll('.grid-item');

items.forEach(function(item) {
  var draggie = new Draggabilly(item);
  pckry.bindDraggabillyEvents(draggie);
  draggies.push(draggie);
});

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

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

Оглавление