horizontal

Для начала работы с библиотекой Packery необходимо подключить её в проект. Существует несколько способов: через CDN или установкой через npm/yarn.

Через CDN:

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

Через npm:

npm install packery

После установки через npm можно импортировать библиотеку в Jav * aScript:

import Packery from 'packery';

Инициализация горизонтального макета

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

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

Ключевые параметры:

  • itemSelector — CSS-селектор элементов сетки.
  • gutter — отступ между элементами.
  • horizontal — флаг, активирующий горизонтальное размещение.

Расположение элементов и сетка

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

.grid {
  width: 100%;
  height: 300px; /* фиксированная высота для горизонтального потока */
  position: relative;
}
.grid-item {
  width: 150px;
  height: 150px;
  margin-bottom: 10px; /* вертикальный промежуток внутри ряда */
  background-color: #3498db;
}

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

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

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

Для удаления:

const itemToRemove = grid.querySelector('.grid-item:last-child');
pckry.remove(itemToRemove);
pckry.layout();

Использование методов appended и remove гарантирует корректное обновление горизонтальной компоновки.

Drag & Drop в горизонтальном режиме

Packery интегрируется с библиотекой Draggabilly для перетаскивания элементов. В горизонтальной сетке важно учитывать ось перемещения:

import Draggabilly from 'draggabilly';

pckry.getItemElements().forEach(itemElem => {
  const draggie = new Draggabilly(itemElem, { axis: 'x' });
  pckry.bindDraggabillyEvents(draggie);
});

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

  • axis: 'x' ограничивает движение по горизонтали.
  • Packery автоматически перестраивает соседние блоки при перемещении.

Работа с responsive и изменением размеров контейнера

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

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

Для адаптивных сеток можно комбинировать gutter и itemSelector с CSS-свойством flex-basis или width: auto для гибкой ширины элементов.

Комбинация с masonry и horizontal

Packery допускает смешение стилей: можно иметь горизонтальный поток с masonry-подобным заполнением по высоте. Для этого важно:

  • задавать разные размеры элементов;
  • использовать percentPosition: true для масштабирования относительно контейнера;
  • контролировать gutter для точного выравнивания.
const pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  horizontal: true,
  percentPosition: true
});

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

При больших наборах элементов горизонтальные сетки могут тормозить. Рекомендуется:

  • ограничивать количество одновременно отображаемых элементов;
  • использовать transform: translate3d для анимаций;
  • комбинировать Packery с виртуальным скроллом для длинных списков;
  • при динамическом добавлении нескольких элементов вызывать appended для всех сразу, а потом один раз layout.

Анимации и эффекты

Packery поддерживает плавное расположение элементов через CSS-переходы:

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

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

Заключение ключевых особенностей horizontal режима

  • Расположение элементов слева направо, с заполнением по высоте.
  • Требуется фиксированная высота контейнера.
  • Совместимость с drag & drop через Draggabilly.
  • Динамическое добавление и удаление элементов с автоматическим перераспределением.
  • Возможность комбинирования с masonry-стилем и адаптивными сетками.
  • CSS-анимации обеспечивают плавное перестроение блоков.

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

Оглавление