Инициализация через HTML-атрибуты

Packery — это библиотека для динамической компоновки элементов сетки в стиле «masonry». Одним из удобных способов её использования является инициализация через HTML-атрибуты, что позволяет минимизировать вмешательство JavaScript-кода и ускорить разработку интерфейсов.

Атрибут data-packery-options

Для того чтобы Packery автоматически инициализировался на контейнере, достаточно добавить к элементу атрибут data-packery-options. Этот атрибут содержит JSON-объект с настройками сетки. Пример базовой конфигурации:

<div class="grid" data-packery-options='{ "itemSelector": ".grid-item", "gutter": 10, "percentPosition": true }'>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>
  • itemSelector — CSS-селектор для элементов сетки.
  • gutter — расстояние между элементами в пикселях.
  • percentPosition — позволяет задавать позиции элементов в процентах, что удобно для адаптивного дизайна.

Packery автоматически считывает этот атрибут при инициализации и применяет указанные параметры. Важно, чтобы JSON был корректно сформирован: кавычки должны быть двойными, а все ключи — строками.

Поддержка пользовательских опций

Все основные параметры Packery могут быть заданы через data-packery-options. Например, управление методами позиционирования или включение анимации:

<div class="grid" data-packery-options='{
  "itemSelector": ".grid-item",
  "gutter": 15,
  "transitionDuration": "0.4s",
  "stamp": ".stamp"
}'>
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item stamp">C</div>
</div>
  • transitionDuration — задает длительность анимации при перестройке сетки.
  • stamp — элемент, который будет занимать фиксированное место в сетке, вокруг которого располагаются другие элементы.

Автоматическая инициализация

Для использования HTML-инициализации необходимо подключить стандартный Packery JS-файл и библиотеку packery.pkgd.js. После этого вызов дополнительного JavaScript-кода не обязателен: Packery сам просканирует DOM на наличие элементов с data-packery-options и инициализирует сетку.

Если требуется ручной запуск, можно использовать:

var grids = document.querySelectorAll('[data-packery-options]');
grids.forEach(function(grid) {
  var options = JSON.parse(grid.getAttribute('data-packery-options'));
  new Packery(grid, options);
});

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

Особенности работы с адаптивной версткой

Использование percentPosition: true в HTML-атрибутах позволяет сетке автоматически подстраиваться под ширину контейнера. Для оптимизации необходимо:

  • Указывать размеры элементов в процентах через CSS.
  • Обеспечивать правильный расчет gutter и маргинов для разных экранов.
  • Использовать медиазапросы для изменения data-packery-options, если требуется различная логика для мобильных и десктопных устройств.

Ограничения HTML-инициализации

  • JSON в атрибуте должен быть корректным, иначе инициализация не сработает.
  • Некоторые сложные опции, зависящие от динамических данных (например, функции обратного вызова onLayoutComplete), нельзя передать через HTML — их нужно подключать через JavaScript.
  • Автоматическая инициализация происходит один раз при загрузке страницы; для динамически добавленных элементов требуется повторная инициализация через JS.

Практические рекомендации

  • Всегда использовать минимальный набор опций в HTML, чтобы не перегружать JSON.
  • Для сложной логики сетки комбинировать HTML-атрибуты и JavaScript-инициализацию.
  • Проверять консоль браузера на наличие ошибок синтаксиса JSON.

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

Оглавление