Совместная работа с Packery

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

Подключение Isotope и Packery

Для работы необходимы скрипты обеих библиотек. Packery может быть подключён как отдельный скрипт, либо через пакет isotope.pkgd.js, который уже включает поддержку Packery:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>

Важно: при подключении через isotope.pkgd.js объект Isotope автоматически поддерживает layoutMode: 'packery'.

Инициализация сетки с Packery

Для использования Packery в Isotope необходимо указать соответствующий режим компоновки при инициализации:

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

var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'packery',
  packery: {
    gutter: 10 // расстояние между элементами
  }
});

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

itemSelector — класс элементов сетки, которые будут управляться Isotope.
layoutMode: 'packery' — переключение на режим Packery.
Параметр packery позволяет настроить такие опции, как gutter, columnWidth, percentPosition.

Настройка размеров элементов

Packery обеспечивает «жесткую» сетку с учётом размеров элементов. Для корректного отображения сетки важно правильно указать размеры через CSS:

.grid {
  display: block; /* Packery управляет позиционированием элементов */
}

.grid-item {
  width: 150px;
  height: 150px;
  margin-bottom: 10px;
}

Если используется percentPosition: true, ширина элементов задаётся в процентах относительно контейнера:

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

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

Packery поддерживает использование фиксаторов (sizer) для динамического расчёта размеров:

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

И настройка через Jav * aScript:

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

Использование grid-sizer позволяет задать базовую ширину столбца, а gutter-sizer — отступ между элементами. Это особенно полезно для адаптивного дизайна.

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

Isotope с Packery полностью поддерживает фильтрацию и сортировку:

// Фильтрация по классу
iso.arrange({ filter: '.category-1' });

// Сортировка по атрибуту
iso.arrange({
  sortBy: 'name',
  getSortData: {
    name: '[data-name]'
  }
});

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

Динамическое добавление и удаление элементов

Packery интегрируется с методами Isotope для управления DOM:

// Добавление нового элемента
var newItem = document.createElement('div');
newItem.classList.add('grid-item');
grid.appendChild(newItem);
iso.appended(newItem);

// Удаление элемента
var itemToRemove = document.querySelector('.grid-item');
iso.remove(itemToRemove);
iso.layout();

Методы appended, removed и layout гарантируют, что сетка обновится корректно без перекрытия элементов.

Адаптивность и перерасчёт размеров

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

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

Если используются элементы с процентной шириной, layout обеспечивает перераспределение элементов в новые колонки.

Анимация и плавные переходы

Isotope с Packery поддерживает анимацию при перестановке элементов:

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

transitionDuration задаёт скорость анимации, что делает перестановку элементов плавной и визуально привлекательной.

Взаимодействие с другими плагинами

Packery в комбинации с Isotope может использоваться вместе с:

Infinite Scroll для динамической подгрузки элементов;
Masonry для отдельных режимов сетки;
Lightbox для визуальных галерей.

Правильная инициализация и последовательность подключения скриптов критична для корректного поведения.