addItems

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

Синтаксис

packeryInstance.addItems( elems )

Параметры:

  • elems – DOM-элемент, NodeList или массив элементов, которые необходимо добавить в сетку. Метод корректно обрабатывает как одиночные элементы, так и коллекции.

Возвращаемое значение: Возвращает массив добавленных элементов, что позволяет сразу использовать их для дальнейшей работы, например, для привязки событий или анимации.

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

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

// Создание новых элементов
var newItems = [];
for (var i = 0; i < 3; i++) {
  var item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = 'Новый элемент ' + (i + 1);
  container.appendChild(item);
  newItems.push(item);
}

// Добавление новых элементов в Packery
pckry.addItems(newItems);

// Перестройка сетки с учетом новых элементов
pckry.layout();

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

Особенности метода

  1. Не вызывает автоматическую перестройку сетки. После addItems необходимо явно вызвать layout() или appended() для корректного размещения новых элементов.

  2. Совместимость с методами анимации. Добавленные элементы можно сразу анимировать с помощью CSS-трансформаций, так как Packery корректно учитывает размеры и позиции новых блоков.

  3. Массовое добавление элементов. Метод эффективно работает с NodeList и массивами, позволяя добавлять десятки и сотни элементов без заметного падения производительности.

  4. Поддержка динамического контента. Подходит для ситуаций, когда элементы создаются после асинхронного запроса (AJAX, fetch) или генерируются скриптом.

Комбинация с appended

После addItems часто используется метод appended:

var addedElems = pckry.addItems(newItems);
pckry.appended(addedElems);

Разница между layout() и appended():

  • layout() – перестраивает всю сетку заново.
  • appended() – добавляет новые элементы с анимацией, оставляя существующие позиции неизменными. Это более эффективный способ для динамически подгружаемых элементов.

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

  • Минимизировать количество вызовов layout: при добавлении множества элементов рекомендуется группировать их в массив и вызывать addItems один раз, затем layout() или appended().
  • Использовать фрагменты документа: для больших вставок стоит сначала собрать элементы в DocumentFragment, затем добавить в DOM и передать в addItems. Это снижает количество операций с DOM и ускоряет рендеринг.
  • Обрабатывать события после добавления: добавленные элементы можно сразу обрабатывать через forEach или методы привязки событий, используя возвращаемый массив.

Пример динамического подгруженного контента

fetch('/api/get-items')
  .then(response => response.json())
  .then(data => {
    var newItems = data.map(itemData => {
      var elem = document.createElement('div');
      elem.className = 'grid-item';
      elem.textContent = itemData.title;
      return elem;
    });
    
    newItems.forEach(item => container.appendChild(item));
    var added = pckry.addItems(newItems);
    pckry.appended(added);
  });

В этом случае элементы загружаются асинхронно, добавляются в DOM, затем через addItems и appended интегрируются в сетку с сохранением плавной анимации.

Итоговые ключевые моменты

  • addItems добавляет элементы в сетку без полной перестройки.
  • Требует последующего вызова layout() или appended() для корректного отображения.
  • Эффективен при работе с динамическим и асинхронным контентом.
  • Совместим с анимациями и позволяет группировать элементы для оптимизации.

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

Оглавление