Определение элементов сетки

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

Выбор элементов сетки

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

var grid = document.querySelector('.grid');

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

Важно, чтобы все элементы, которые будут позиционироваться, имели одинаковый селектор. Любые вложенные или вспомогательные элементы внутри grid-item не должны использоваться в качестве отдельных элементов сетки.

Определение размеров элементов

Packery автоматически определяет размеры элементов на основе их ширины и высоты в пикселях, включая padding и border. Для корректной работы часто используют фиксированные размеры через CSS:

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

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

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

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

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

.grid-item--width2 { width: 300px; }
.grid-item--height2 { height: 200px; }

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

Идентификация элементов программно

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

var item = document.createElement('div');
item.className = 'grid-item';
grid.appendChild(item);

pckry.appended(item);
pckry.layout();
  • appended(item) сообщает Packery, что добавлен новый элемент.
  • layout() пересчитывает расположение всех элементов.

Аналогично работают методы remove() и reloadItems() для управления элементами после изменений DOM.

Особенности вложенных элементов

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

<div class="grid">
  <div class="grid-item">
    <div class="content">
      <p>Текст и изображения</p>
    </div>
  </div>
</div>

В этом примере только .grid-item участвует в позиционировании, а .content служит визуальным контейнером.

Выводы по определению элементов

  • Элементы сетки должны иметь одинаковый селектор, переданный в itemSelector.
  • Размеры элементов определяются CSS, важно учитывать загрузку динамического контента.
  • Для разноразмерных элементов используют CSS-классы с разными ширинами и высотами.
  • Динамическое добавление, удаление и обновление элементов производится методами Packery (appended, remove, reloadItems, layout).
  • Вложенные элементы контейнеров не мешают работе сетки, если они не указаны как отдельные itemSelector.

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

Оглавление