getItemElements

Метод getItemElements является ключевым инструментом для работы с элементами сетки в библиотеке Packery. Он позволяет получить массив DOM-элементов, которые были зарегистрированы как элементы сетки, независимо от того, находятся ли они в данный момент в контейнере визуально или были добавлены динамически.

Синтаксис

var items = pckry.getItemElements();
  • pckry – экземпляр Packery, созданный через new Packery(container, options).
  • Возвращаемое значение – массив элементов DOM (HTMLElement[]), представляющих все текущие элементы сетки.

Основные особенности

  1. Получение всех элементов сетки Метод возвращает только те элементы, которые были добавлены в Packery с помощью:

    • HTML-кода в контейнере при инициализации;
    • методов append, prepended или addItems для динамического добавления.

  2. Не зависит от состояния отображения Даже если элемент скрыт через CSS (display: none) или временно удален из DOM, он остаётся в массиве элементов Packery, если был зарегистрирован.

  3. Использование с другими методами Packery Полученные элементы удобно использовать совместно с:

    • layout() – для перерасчета расположения;
    • stamp() – для создания «штампов» или фиксированных элементов;
    • remove() – для удаления элементов из сетки.

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

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

// Получаем все элементы сетки
var items = pckry.getItemElements();
console.log(items); // [div.grid-item, div.grid-item, div.grid-item]

// Можно изменить стиль всех элементов через цикл
items.forEach(function(item) {
  item.style.border = "2px solid #333";
});

// Динамически добавленные элементы
var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
pckry.appended(newItem);

var updatedItems = pckry.getItemElements();
console.log(updatedItems.length); // увеличится на 1

Отличие от getItems

Метод getItems возвращает массив объектов Packery, где каждый объект содержит как DOM-элемент (element), так и дополнительные свойства, используемые внутри Packery (например, x, y, isIgnored).

Пример:

var itemsObjects = pckry.getItems();
console.log(itemsObjects[0].element); // реальный DOM-элемент

Таким образом, getItemElements удобен для прямой работы с DOM, а getItems – для работы с внутренней логикой Packery.

Практические сценарии применения

  1. Изменение стиля элементов Позволяет перебрать все элементы сетки и применить CSS-классы или стили без необходимости обращаться к контейнеру напрямую.

  2. Фильтрация элементов Можно получить массив и отфильтровать элементы по классам, атрибутам или другим условиям:

var visibleItems = pckry.getItemElements().filter(function(item) {
  return !item.classList.contains('hidden');
});
  1. Интеграция с анимациями После анимации элементов можно вызвать layout() для перерасчета сетки:
var items = pckry.getItemElements();
items.forEach(function(item) {
  item.style.opacity = 0;
  setTimeout(function() {
    item.style.opacity = 1;
    pckry.layout();
  }, 200);
});

Советы по оптимизации

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

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

Оглавление