itemSelector

Свойство itemSelector в библиотеке Packery является ключевым параметром конфигурации. Оно определяет CSS-селектор элементов, которые будут участвовать в компоновке сетки. Без корректного указания itemSelector Packery не сможет определить, какие DOM-узлы должны быть расположены по схеме «masonry» или «grid».

Пример базовой конфигурации:

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

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

Важные особенности использования

  1. Точность селектора itemSelector должен точно соответствовать классам или типам элементов, которые требуется позиционировать. Селекторы типа .grid-item или div.item работают корректно, но * (все элементы) может привести к неожиданному поведению, особенно если внутри контейнера есть элементы, не предназначенные для сетки.

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

  3. Динамическое добавление элементов Когда новые элементы добавляются в DOM после инициализации, их также необходимо регистрировать с помощью метода append или prepended, чтобы Packery смог применить к ним правила itemSelector.

var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
pckry.appended(newItem);
  1. Совместимость с методами фильтрации itemSelector напрямую влияет на работу методов layout и fit. Packery будет учитывать только те элементы, которые соответствуют селектору, при перерасчёте сетки.

Практические советы

  • Избегать универсальных селекторов Использование * или слишком общих классов может привести к конфликту стилей и пересечению элементов, что нарушает визуальный порядок сетки.

  • Использовать семантические классы Присваивание отдельного класса каждому элементу сетки повышает читаемость кода и облегчает поддержку.

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

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

Взаимодействие с другими опциями Packery

  • gutter – промежуток между элементами; применяется только к узлам, выбранным через itemSelector.
  • percentPosition – влияет на расчет координат в процентах для элементов, указанных через itemSelector.
  • Методы remove, stamp – оперируют только с элементами, соответствующими itemSelector.

Примеры сложных конфигураций

  1. Несколько типов элементов
var pckry = new Packery('.grid', {
  itemSelector: '.grid-item, .grid-featured',
  gutter: 15
});

В этом примере одновременно учитываются два типа элементов с разными классами.

  1. Комбинирование с фильтрацией по атрибутам
var pckry = new Packery('.grid', {
  itemSelector: '.grid-item[data-active="true"]',
  gutter: 10
});

Packery будет игнорировать элементы с data-active="false".

  1. Динамическое изменение селектора
pckry.options.itemSelector = '.new-grid-item';
pckry.reloadItems();
pckry.layout();

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

Заключение ключевых моментов

  • itemSelector – основной фильтр для элементов сетки.
  • Точный и осмысленный селектор повышает производительность и предотвращает визуальные ошибки.
  • Для динамически добавляемых элементов необходимо использовать методы Packery (append, prepended).
  • Сложные комбинации классов и атрибутов позволяют гибко управлять содержимым сетки.

Корректное использование itemSelector формирует основу стабильной и предсказуемой работы Packery с любыми типами сеток и динамическим контентом.

Оглавление