Программное управление позициями

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

Инициализация Packery с возможностью управления

Для программного управления необходимо инициализировать Packery с опцией itemSelector и, при необходимости, percentPosition:

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  percentPosition: true
});
  • itemSelector — CSS-селектор элементов сетки.
  • gutter — отступ между элементами.
  • percentPosition — координаты будут рассчитываться в процентах, полезно для адаптивного дизайна.

Получение и установка позиции элемента

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

var itemElem = grid.querySelector('.grid-item:first-child');
var item = pckry.getItem(itemElem);

// Получение текущей позиции
console.log(item.position.x, item.position.y);

// Задание новой позиции
item.setPosition(50, 100);
pckry.layout();
  • getItem(element) возвращает объект PackeryItem для элемента.
  • setPosition(x, y) позволяет задать координаты вручную.
  • layout() обновляет сетку после изменения позиции элементов.

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

Packery поддерживает динамическое перемещение элементов между позициями с помощью метода moveItem:

var item = pckry.getItem(document.querySelector('.grid-item:nth-child(2)'));
pckry.shiftLayout(); // обновление перед перемещением
item.setPosition(200, 0);
pckry.layout();

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

Перестановка и перестройка сетки

Packery позволяет изменять порядок элементов без полной перерисовки:

var items = pckry.getItemElements();
items.reverse(); // меняем порядок в массиве
pckry.reloadItems(); // обновляем внутреннюю структуру
pckry.layout(); // применяем изменения

Метод reloadItems() необходим для того, чтобы Packery пересчитал внутренние данные о позициях элементов после их перестановки.

Анимация перемещения

Packery интегрируется с библиотекой Draggable или CSS-анимациями для плавного перемещения:

itemElem.style.transition = 'transform 0.4s';
item.setPosition(100, 200);
pckry.layout();

Использование transition позволяет элементам анимированно переходить к новым координатам, что улучшает UX при динамическом управлении.

Работа с динамическими добавлениями и удалениями

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

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

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

var itemToRemove = pckry.getItem(document.querySelector('.grid-item:last-child'));
pckry.remove(itemToRemove.element);
pckry.layout();
  • appended(element) — сообщает Packery о новых элементах, которые нужно учитывать в сетке.
  • remove(element) — удаляет элемент из сетки и перераспределяет остальные.

Программное управление размерами

Размеры элементов напрямую влияют на позиционирование. Их изменение требует обновления Packery:

var item = pckry.getItem(document.querySelector('.grid-item:first-child'));
item.element.style.width = '200px';
item.element.style.height = '150px';
pckry.fit(item.element); // подгоняет элемент в сетку
pckry.layout();
  • fit(element) — помещает элемент в ближайшую доступную позицию после изменения размеров.
  • Обновление размеров следует выполнять до вызова layout().

Интеграция с внешними событиями

Packery позволяет реагировать на события и изменять позиции программно. Примеры событий:

pckry.on('dragItemPositioned', function(item) {
  console.log('Элемент перемещён', item.element);
});

pckry.on('layoutComplete', function(items) {
  console.log('Сетка обновлена', items.length, 'элементов');
});
  • Событие dragItemPositioned позволяет фиксировать новые позиции после перетаскивания.
  • Событие layoutComplete полезно для синхронизации с внешним интерфейсом.

Сложные сценарии

  1. Программная сортировка: массив элементов сортируется по метаданным, затем вызываются reloadItems() и layout().
  2. Сетка с изменяющимися размерами: при динамическом изменении размеров отдельных элементов используется fit() или stamp() для фиксации позиций.
  3. Смешение ручного управления и drag’n’drop: позиции элементов задаются программно, а пользователи могут перемещать элементы, Packery автоматически пересчитывает сетку.

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

  • Минимизировать частоту вызовов layout() при массовых изменениях.
  • Использовать reloadItems() только после значительных изменений в DOM.
  • Применять CSS-переходы для плавной анимации, избегая лишней нагрузки на рендеринг.

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

Оглавление