Параметры инициализации по умолчанию

Библиотека Packery является мощным инструментом для динамического расположения элементов сетки на веб-странице, обеспечивая «мозаичный» эффект, при котором элементы автоматически подстраиваются друг под друга. Ключевым аспектом работы Packery являются параметры инициализации, задающие поведение сетки и ее элементов. Рассмотрим их подробно.

itemSelector

Описание: Этот параметр определяет CSS-селектор элементов, которые Packery будет считать отдельными блоками для размещения в сетке.

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

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

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

  • Все элементы, соответствующие селектору, будут автоматически позиционироваться в сетке.
  • Если элемент не соответствует селектору, Packery его игнорирует.
  • Можно использовать комбинированные селекторы, например .grid-item.large.

gutter

Описание: Определяет расстояние между элементами сетки. Может быть задан в пикселях или в процентах.

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

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

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

  • Отрицательные значения не поддерживаются.
  • При указании gutter Packery корректно учитывает промежутки при вычислении позиций элементов.
  • Можно использовать динамическое вычисление, например с использованием CSS-переменных.

columnWidth

Описание: Задает ширину столбца сетки, что особенно важно для многострочных или адаптивных макетов.

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

var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  columnWidth: 100
});

Важные моменты:

  • Может быть задан как число (ширина в пикселях), так и как CSS-селектор. В последнем случае Packery будет брать ширину первого элемента, соответствующего селектору.
  • Если не указан, Packery попытается вычислить ширину автоматически, используя первый элемент сетки.
  • Рекомендуется для адаптивного дизайна использовать селектор элемента с percentage width.

rowHeight

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

var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  rowHeight: 50
});

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

  • Если не задан, Packery подстраивает позиции элементов под их естественную высоту.
  • Совместно с gutter обеспечивает ровные промежутки между строками.

percentPosition

Описание: Определяет, будут ли координаты элементов вычисляться в процентах или пикселях.

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

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

  • Полезно для адаптивной верстки.
  • При значении true ширина и позиция элементов привязаны к размерам контейнера, а не к фиксированным пикселям.

originLeft и originTop

Описание: Эти параметры задают начальную точку отсчета сетки.

var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  originLeft: false, // сетка начинается справа налево
  originTop: true    // сетка начинается сверху вниз
});

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

  • originLeft: false полезно для RTL-интерфейсов.
  • originTop: false может быть использован для сеток, которые строятся снизу вверх.

stamp и isStaggered

Описание:

  • stamp позволяет «закреплять» элементы, которые не будут смещаться Packery.
  • isStaggered определяет, следует ли применять эффекты постепенного появления элементов при инициализации.
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  stamp: '.grid-item--fixed'
});

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

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

transitionDuration

Описание: Задает длительность анимации перемещения элементов.

var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  transitionDuration: '0.4s'
});

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

  • Может быть указан в секундах (s) или миллисекундах (ms).
  • Если установить 0, анимация отключается, что ускоряет перестройку сетки.
  • Работает совместно с CSS-трансформациями элементов.

fitWidth

Описание: Автоматически подгоняет ширину контейнера под ширину всех элементов сетки.

var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  fitWidth: true
});

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

  • Контейнер будет расширяться только под количество элементов в строке.
  • Полезно для центровки сетки внутри родительского контейнера.
  • В комбинации с percentPosition: true обеспечивает адаптивное центрирование элементов.

Резюме поведения параметров по умолчанию

  • itemSelector – обязательный для определения элементов сетки.
  • gutter, columnWidth, rowHeight – задают геометрию сетки.
  • percentPosition, originLeft, originTop – управляют системой координат.
  • stamp, transitionDuration, fitWidth – добавляют функциональность и визуальные эффекты.

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

Оглавление