prepended

Метод prepended в библиотеке Packery предназначен для динамического добавления новых элементов в контейнер сетки в начале, то есть перед всеми существующими элементами. В отличие от стандартного метода append, который добавляет элементы в конец, prepended обеспечивает обратный порядок добавления, сохраняя адаптивную перестановку элементов сетки.

Синтаксис и базовое использование

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

var newItems = document.createElement('div');
newItems.classList.add('grid-item');
newItems.textContent = 'Новый элемент';

pckry.prepended(newItems);

Пояснения ключевых параметров:

  • grid — DOM-элемент контейнера сетки, с которым работает Packery.
  • itemSelector — CSS-селектор элементов сетки.
  • gutter — промежуток между элементами.
  • newItems — новые элементы, которые добавляются в начало сетки.

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

Добавление нескольких элементов

Метод prepended поддерживает добавление как одного элемента, так и массива элементов:

var itemsArray = [];

for (var i = 0; i < 5; i++) {
  var item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = `Элемент ${i+1}`;
  itemsArray.push(item);
}

pckry.prepended(itemsArray);

Packery интегрирует все новые элементы перед текущими и сразу пересчитывает позиции, без необходимости дополнительного вызова layout.

Взаимодействие с изображениями

При работе с элементами, содержащими изображения, важно учитывать, что Packery вычисляет размеры элементов на основе фактического рендеринга. Для корректного позиционирования используется библиотека imagesLoaded:

imagesLoaded(itemsArray, function() {
  pckry.prepended(itemsArray);
});

Такой подход гарантирует, что сетка не «прыгает» после загрузки изображений.

Анимации при добавлении элементов

Packery поддерживает плавную анимацию новых элементов через CSS-переходы. Для этого достаточно добавить CSS:

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

.grid-item.is-visible {
  opacity: 1;
}

И в JavaScript после добавления элементов:

pckry.prepended(itemsArray);
itemsArray.forEach(function(item) {
  item.classList.add('is-visible');
});

Это создаёт эффект появления элемента с плавной перестройкой сетки.

Сочетание с методами layout и shiftLayout

Метод prepended тесно интегрируется с другими методами Packery:

  • layout() — полностью пересчитывает сетку. Используется, если элементы были изменены после добавления.
  • shiftLayout() — обновляет только позиции, сдвигая элементы без полного пересчёта.

Пример комбинирования:

pckry.prepended(itemsArray);
pckry.shiftLayout();

Такой подход полезен при добавлении большого числа элементов, когда полное перераспределение дорого по производительности.

Особенности при использовании с Masonry-стилем

Packery является расширением концепции Masonry, и метод prepended работает по схожим принципам:

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

Практические рекомендации

  1. Для элементов с динамическим размером использовать imagesLoaded.
  2. Добавлять анимацию через CSS-классы для плавного визуального эффекта.
  3. При массовом добавлении элементов комбинировать prepended с shiftLayout для оптимизации производительности.
  4. Использовать селектор itemSelector строго по уникальным классам, чтобы новые элементы корректно учитывались Packery.

Итоговое поведение

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

Оглавление