layout

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

Инициализация контейнера

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

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

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

  • itemSelector — CSS-селектор элементов, которые будут участвовать в раскладке. Каждый элемент должен быть заранее размечен соответствующим классом.
  • gutter — отступ между элементами. Можно задавать как в пикселях, так и в процентах.
  • percentPosition — если true, Packery использует процентные значения для позиционирования, что полезно для адаптивных макетов.

Размеры и ориентация элементов

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

pckry.layout();

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

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

Методы управления layout

Packery предоставляет богатый набор методов для управления расположением элементов:

  • appended(items) — добавляет новые элементы в сетку и автоматически размещает их.
  • prepended(items) — вставляет элементы в начало сетки.
  • remove(items) — удаляет элементы и пересчитывает layout.
  • stamp(element) — фиксирует элемент, который Packery будет обходить при расчете расположения других элементов.
  • unstamp(element) — снимает фиксацию.
  • shiftLayout() — пересчитывает сетку с учетом текущих размеров элементов и контейнера.
  • fit(element, x, y) — размещает элемент на указанной позиции без смещения остальных.

Работа с динамическим контентом

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

  1. Вставить элемент в DOM.
  2. Сообщить Packery о новом элементе через appended.
  3. Пересчитать layout при необходимости.
var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
pckry.appended(newItem);

Настройка анимации и транзишнов

Packery поддерживает плавное перемещение элементов через CSS-переходы. Для включения анимации необходимо добавить соответствующие стили:

.grid-item {
  transition: transform 0.4s ease;
}

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

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

Для больших сеток с сотнями элементов рекомендуется:

  • Использовать percentPosition: true для адаптивности без пересчета размеров.
  • Минимизировать количество пересчетов layout при массовом добавлении элементов.
  • Включать анимацию только для видимых элементов, скрывая остальные через display: none или visibility: hidden.
  • Использовать методы stamp и unstamp для статических элементов, которые не участвуют в динамическом размещении.

Взаимодействие с внешними библиотеками

Packery совместим с Draggabilly для перетаскивания элементов:

var draggies = [];
pckry.getItemElements().forEach(function(itemElem) {
  var draggie = new Draggabilly(itemElem);
  pckry.bindDraggabillyEvents(draggie);
  draggies.push(draggie);
});

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

Особенности responsive-layout

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

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

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

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

Оглавление