jQuery

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

Инициализация и базовая настройка

Для начала работы с Packery необходимо подключить библиотеку и выбрать контейнер, внутри которого будут располагаться элементы:

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

Пояснения параметров:

  • itemSelector — CSS-селектор элементов сетки, которые будут позиционироваться Packery.
  • gutter — расстояние между элементами (в пикселях), что позволяет управлять визуальным отступом между блоками.
  • columnWidth — ширина колонки сетки. Может быть указана как число пикселей или элемент, на основе которого рассчитывается ширина колонки.
  • rowHeight — аналогично columnWidth, но для высоты строк, используется при необходимости фиксированного вертикального распределения.

Размещение элементов

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

Для динамического добавления элементов после инициализации используется метод:

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

Метод appended сообщает Packery о появлении нового элемента, чтобы он корректно пересчитал расположение блоков.

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

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);
});

Ключевые моменты:

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

Фильтрация и скрытие элементов

Packery не предоставляет встроенных методов фильтрации, но совместно с jQuery можно легко управлять видимостью элементов:

$('.filter-button').on('click', function(){
  var filterClass = $(this).data('filter');
  $('.grid-item').hide();
  $('.grid-item.' + filterClass).show();
  pckry.layout();
});

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

Изменение размеров элементов

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

item.style.width = '200px';
item.style.height = '150px';
pckry.layout();

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

.grid-item {
  transition: width 0.3s, height 0.3s;
}

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

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

Packery поддерживает несколько полезных событий:

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

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

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

Оптимизация производительности

При большом количестве элементов стоит учитывать следующие моменты:

  • Использовать imagesLoaded для корректного расчета размеров изображений перед инициализацией Packery.
  • Минимизировать количество вызовов layout(), объединяя несколько изменений в один вызов.
  • Для сложных интерфейсов использовать transitionDuration: '0.3s' вместо layout() после каждой мелкой операции.

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

Packery можно легко использовать вместе с jQuery:

$('.grid').packery({
  itemSelector: '.grid-item',
  gutter: 10
});

В jQuery-стиле методы appended, remove, layout также доступны:

$('.grid').packery('appended', $('.new-item'));
$('.grid').packery('layout');

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

Примеры расширенной кастомизации

  1. Разные размеры блоков в одной сетке:
var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  columnWidth: 100
});

Элементы с классами grid-item--wide или grid-item--tall могут иметь CSS-стили:

.grid-item--wide { width: 200px; }
.grid-item--tall { height: 200px; }

Packery автоматически подстроит расположение соседних элементов.

  1. Динамическое удаление элементов:
var item = document.querySelector('.grid-item');
pckry.remove(item);
pckry.layout();

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

Packery предоставляет гибкий и мощный инструмент для построения адаптивных сеток с поддержкой динамических изменений, перетаскивания и анимаций. Его возможности легко расширяются совместно с jQuery, CSS-переходами и сторонними библиотеками для создания сложных интерфейсов.

Оглавление