Сравнение с аналогами

Packery представляет собой библиотеку для построения динамических, плотных сеток с поддержкой drag-and-drop и автоматическим размещением элементов. Основная особенность Packery — способность упорядочивать элементы без пустого пространства, благодаря алгоритму bin-packing, что отличает её от классических Masonry-сеток.

  • Masonry ориентирована на вертикальное выравнивание элементов по колонкам, оставляя пустые участки при элементах разной высоты. Packery же эффективно использует пространство, размещая элементы там, где это возможно, даже если они имеют разные размеры по ширине и высоте.
  • Isotope совмещает фильтрацию, сортировку и анимацию с Masonry-подобной сеткой, но Packery ориентирована на плотное, “tetris-подобное” размещение элементов и управление drag-and-drop, что делает её удобнее для интерактивных интерфейсов.

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

Packery использует координаты x и y для каждого элемента, что позволяет гибко изменять их положение и поддерживать интерактивное перетаскивание. Алгоритм учитывает:

  • Размер элемента (ширина и высота)
  • Позицию соседних элементов
  • Наличие свободного пространства

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

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

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

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

Drag-and-Drop и взаимодействие с пользователем

Packery тесно интегрируется с Draggabilly или jQuery UI, позволяя пользователю перетаскивать элементы по сетке с сохранением плотного расположения. Это отличие от Masonry и Isotope, где drag-and-drop реализуется либо через дополнительные плагины, либо ограниченно.

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

Эффекты, достигаемые при таком взаимодействии:

  • Плавное смещение соседних элементов при перемещении
  • Подстройка сетки под новые координаты
  • Поддержка анимации переходов при изменении расположения

Фильтрация и сортировка

Хотя Packery не имеет встроенной фильтрации и сортировки как Isotope, её можно комбинировать с Isotope или создавать кастомные решения:

  • Для фильтрации элементов изменяется класс или display элементов, после чего вызывается pckry.layout() для перерасчёта сетки.
  • Для сортировки можно динамически переставлять DOM-узлы и запускать перерасчёт положения.

Производительность и адаптивность

Packery оптимизирована для работы с относительно большим количеством элементов, однако плотная упаковка требует больше вычислений, чем простая Masonry. Важно учитывать:

  • Ограничение числа одновременно отображаемых элементов для плавной анимации
  • Использование requestAnimationFrame при сложных интерактивных действиях
  • Оптимизацию размеров изображений и блоков для ускорения расчёта сетки

Адаптивность достигается с помощью percentPosition и медиазапросов CSS. Packery перерасчитывает позиции элементов при изменении ширины контейнера, сохраняя плотность сетки.

Сильные стороны Packery

  • Плотное использование пространства без пустот
  • Интерактивность через drag-and-drop
  • Поддержка разных размеров элементов
  • Гибкость интеграции с другими библиотеками

Ограничения

  • Нет встроенной фильтрации и сортировки
  • Высокая вычислительная нагрузка при большом количестве элементов
  • Требует сторонних решений для полной адаптивной функциональности

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

Оглавление