Screen readers

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

Инициализация и базовые параметры

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

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
const grid = document.querySelector('.grid');

const pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  percentPosition: true
});
  • itemSelector — CSS-селектор для элементов сетки.
  • gutter — отступ между элементами.
  • percentPosition — использование процентного позиционирования для адаптивности.

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

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

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

Если элементы имеют переменные размеры, Packery корректно размещает их, избегая пустых промежутков.

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

Packery интегрируется с Draggabilly для перетаскивания:

const draggies = [];

pckry.getItemElements().forEach(itemElem => {
  const draggie = new Draggabilly(itemElem);
  pckry.bindDraggabillyEvents(draggie);
  draggies.push(draggie);
});
  • bindDraggabillyEvents позволяет библиотеке корректно перестраивать сетку после перемещения элемента.
  • Поддерживается как мышь, так и сенсорные устройства.

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

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

const newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
pckry.appended(newItem);

Удаление элемента:

pckry.remove(itemElem);
pckry.layout();
  • appended — уведомляет Packery о добавлении нового элемента.
  • layout — пересчитывает расположение всех элементов сетки.

Настройка поведения при изменении размеров контейнера

Packery поддерживает автоматическое перераспределение элементов при изменении размеров окна:

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

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

Опции и расширенные возможности

  • originLeft / originTop — изменение исходной точки сетки, например, для RTL-дизайнов.
  • transitionDuration — плавность анимации при перестройке сетки.
  • stamp — позволяет закрепить определённые элементы, вокруг которых будут располагаться остальные.

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

const stampElement = document.querySelector('.stamp');
pckry.stamp(stampElement);
pckry.layout();

Интеграция с CSS-анимациями

Packery поддерживает анимации через CSS, управляемые свойством transition:

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

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

Работа с событиями

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

pckry.on('layoutComplete', items => {
  console.log('Сетка перестроена', items);
});

pckry.on('dragItemPositioned', item => {
  console.log('Элемент перемещён', item);
});
  • layoutComplete — срабатывает после полной перестройки сетки.
  • dragItemPositioned — после завершения перетаскивания конкретного элемента.

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

  1. Минимизировать количество элементов в DOM одновременно, особенно с динамическими обновлениями.
  2. Использовать transitionDuration для плавных анимаций, но не чрезмерно длинных, чтобы не тормозить рендер.
  3. Стараться задавать фиксированные размеры элементов, когда это возможно, для ускорения вычислений Packery.

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

Packery отлично подходит для адаптивного дизайна. Использование percentPosition и медиазапросов позволяет сетке корректно перестраиваться при любых размерах экрана. Важно учитывать, что при значительном изменении размеров элементов или контейнера рекомендуется вызывать layout() для перерасчета позиций.

Совместимость со screen readers

Для доступности необходимо следить за структурой HTML:

  • Каждый элемент сетки должен иметь семантический тег или role="region".
  • Для интерактивных элементов использовать aria-label и tabindex.
  • При динамическом добавлении элементов обновлять live-region уведомления или использовать aria-live="polite", чтобы screen readers уведомляли пользователя о новых элементах.

Пример для доступного элемента:

<div class="grid-item" role="region" aria-label="Новое изображение" tabindex="0"></div>

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

Оглавление