Режим packery

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

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

Ключевые особенности режима:

отсутствие строгой сетки
эффективное заполнение пространства
поддержка элементов различного размера
возможность перетаскивания элементов
динамическая перестройка макета

Алгоритм Packery схож с механизмами, применяемыми в библиотеке Packery, на которой частично основана реализация в Isotope.

Подключение режима Packery

Для использования режима необходимо подключить:

библиотеку Isotope
модуль Packery layout

<script src="isotope.pkgd.min.js"></script>

После подключения режим становится доступным через параметр layoutMode.

Базовая инициализация

Минимальная конфигурация:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'packery'
});

HTML-структура:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
</div>

CSS-пример:

.grid-item {
  width: 100px;
  height: 100px;
}

.grid-item--width2 {
  width: 200px;
}

После инициализации Isotope автоматически рассчитывает расположение элементов.

Принцип заполнения пространства

Алгоритм Packery выполняет несколько этапов:

1. Анализ контейнера

Определяется:

ширина контейнера
размеры элементов
доступные координаты для размещения

2. Поиск свободных областей

Алгоритм формирует список доступных прямоугольных областей внутри контейнера.

3. Размещение элемента

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

4. Обновление свободных зон

После размещения элемент “разрезает” доступную область на новые свободные участки.

Таким образом формируется плотная мозаичная структура.

Опция columnWidth

columnWidth задаёт базовую ширину колонок, используемую при расчёте сетки.

var iso = new Isotope('.grid', {
  layoutMode: 'packery',
  packery: {
    columnWidth: 100
  }
});

Поведение:

все элементы выравниваются относительно этой ширины
размеры элементов могут быть кратны колонке
улучшается визуальная структура сетки

Использование DOM-элемента как эталона:

packery: {
  columnWidth: '.grid-sizer'
}

HTML:

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
</div>

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

Опция gutter

gutter задаёт расстояние между элементами.

packery: {
  gutter: 10
}

Эффект:

добавляет промежутки между блоками
предотвращает визуальное слипание элементов
сохраняет аккуратную структуру мозаики

Использование отдельного элемента:

packery: {
  gutter: '.gutter-sizer'
}

Горизонтальная компоновка

По умолчанию Packery размещает элементы вертикально. Для горизонтального режима используется опция horizontal.

packery: {
  horizontal: true
}

Особенности:

элементы размещаются слева направо
строки формируются автоматически
свободные области заполняются по горизонтали

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

Каждый элемент получает координаты top и left, рассчитанные алгоритмом Packery.

Isotope применяет позиционирование через CSS:

.grid-item {
  position: absolute;
}

Контейнер:

.grid {
  position: relative;
}

Такой подход обеспечивает:

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

Анимация перестройки

Isotope автоматически анимирует перемещение элементов при изменении макета.

Причины перестройки:

добавление элементов
удаление элементов
фильтрация
изменение размеров

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

iso.appended(newItems);
iso.layout();

Элементы плавно перемещаются в новые позиции.

Работа с элементами разного размера

Packery особенно эффективен при использовании блоков различной ширины и высоты.

Пример:

.grid-item {
  width: 100px;
  height: 100px;
}

.grid-item--width2 {
  width: 200px;
}

.grid-item--height2 {
  height: 200px;
}

HTML:

<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>

Алгоритм:

определяет фактические размеры
ищет подходящее место
размещает блок в ближайшей свободной области

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

Packery поддерживает drag-and-drop.

Для этого используется библиотека:

Draggabilly
либо jQuery UI

Пример с Draggabilly:

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

var iso = new Isotope(grid, {
  layoutMode: 'packery',
  itemSelector: '.grid-item'
});

iso.getItemElements().forEach(function(itemElem) {
  var draggie = new Draggabilly(itemElem);
  iso.bindDraggabillyEvents(draggie);
});

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

Алгоритм автоматически:

пересчитывает позиции
освобождает занятые области
перестраивает макет.

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

Новые элементы могут добавляться динамически.

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

grid.appendChild(items);

iso.appended(items);

После добавления:

элемент включается в систему координат
алгоритм ищет для него подходящее место
выполняется анимация размещения

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

Удаление также вызывает перестройку сетки.

iso.remove(element);
iso.layout();

Освободившееся пространство автоматически заполняется соседними блоками.

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

Packery полностью совместим с механизмом фильтрации Isotope.

Пример:

iso.arrange({
  filter: '.category-a'
});

После фильтрации:

скрытые элементы удаляются из расчётов
оставшиеся блоки уплотняются
пустоты исчезают

Сортировка элементов

Сортировка влияет на порядок размещения элементов.

iso.arrange({
  sortBy: 'name'
});

После изменения порядка Packery:

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

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

Packery корректно работает с responsive-версткой.

При изменении ширины контейнера выполняется:

iso.layout();

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

Пример:

window.addEventListener('resize', function() {
  iso.layout();
});

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

При работе с большим количеством элементов важно учитывать несколько правил.

Ограничение количества перестроек

Массовые изменения лучше выполнять пакетно:

iso.arrange({
  filter: '*'
});

а затем вызывать layout() один раз.

Использование CSS-трансформаций

Isotope применяет transform: translate() вместо изменения top и left, что:

снижает нагрузку на reflow
ускоряет анимации
задействует GPU.

Предварительная загрузка изображений

Изображения могут менять размеры элементов после загрузки. Для предотвращения скачков используется библиотека:

imagesLoaded

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

Типичные сценарии использования

Packery широко применяется для интерфейсов с динамическим контентом:

Галереи изображений

элементы различного размера формируют плотную мозаику.

Карточные интерфейсы

используются для:

блогов
новостных лент
портфолио.

Дашборды

Packery позволяет пользователю:

перемещать виджеты
менять порядок блоков
настраивать интерфейс.

Отличие Packery от Masonry

В библиотеке Isotope также доступен режим masonry.

Основные различия:

Характеристика	Masonry	Packery
Структура	колонковая	свободная
Заполнение пустот	ограниченное	максимально плотное
Перетаскивание	нет	поддерживается
Сетка	строгая	гибкая

Packery обеспечивает более естественную мозаичную структуру.

Ограничения режима

Несмотря на гибкость, режим имеет ряд особенностей:

сложность вычислений при большом количестве элементов
возможные изменения высоты страницы
необходимость точной настройки размеров элементов

Также важно учитывать, что алгоритм не всегда гарантирует идеальную плотность упаковки, поскольку работает в рамках быстрого приближенного решения.

Внутренняя модель координат

Packery использует систему координат контейнера:

начало (0,0) — левый верхний угол
координаты элементов определяются по x и y
размеры рассчитываются в пикселях

Структура размещения хранит:

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

При каждом изменении выполняется пересчёт этих структур.

Управление перестройкой макета

Иногда требуется вручную инициировать обновление расположения.

Методы:

iso.layout();

пересчитывает позиции без изменения данных.

iso.reloadItems();

пересчитывает список элементов.

iso.arrange();

выполняет полную операцию:

фильтрация
сортировка
перестройка.

Комбинирование возможностей

Режим Packery часто используется совместно с другими возможностями Isotope:

фильтрация категорий
сортировка карточек
динамическая подгрузка
drag-and-drop интерфейсы
адаптивная сетка

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