Добавление в начало

Masonry — это библиотека JavaScript, реализующая «каскадную» сетку, где элементы располагаются оптимально по высоте колонок. В стандартной работе Masonry новые элементы добавляются в конец контейнера. Для вставки элементов в начало сетки требуется учитывать как DOM, так и внутренние методы Masonry.

Метод prepend()

Masonry предоставляет метод prepend() для добавления элементов в начало контейнера. Этот метод корректно обновляет позиции всех элементов и выполняет анимацию появления нового контента.

Синтаксис:

masonryInstance.prepend(items);
  • items — один элемент DOM или коллекция элементов.
  • Элементы автоматически вставляются в начало контейнера и проходят процесс layout, чтобы корректно распределить их по колонкам.

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

const grid = document.querySelector('.grid');
const masonry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

const newItem = document.createElement('div');
newItem.className = 'grid-item';
newItem.textContent = 'Новый элемент в начале';

masonry.prepend(newItem);

После вызова prepend Masonry перерасчитывает позиции всех элементов с анимацией, если она включена в настройках.

Важность предварительного добавления в DOM

Для корректной работы Masonry важно, чтобы новые элементы сначала добавлялись в DOM, а уже затем Masonry рассчитывал их расположение. Прямое использование prepend() без добавления в DOM приведет к некорректной отрисовке.

Правильная последовательность действий:

  1. Создание нового элемента:
const newItem = document.createElement('div');
newItem.className = 'grid-item';
newItem.textContent = 'Элемент сверху';
  1. Вставка в начало контейнера:
grid.insertBefore(newItem, grid.firstChild);
  1. Обновление Masonry:
masonry.prepended(newItem);
masonry.layout();

Метод prepended() сообщает Masonry, что элемент был вставлен вручную и его нужно учесть при расстановке.

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

Если требуется добавить несколько элементов в начало, можно использовать массив или коллекцию NodeList:

const items = [];
for (let i = 0; i < 3; i++) {
  const item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = `Элемент ${i + 1}`;
  grid.insertBefore(item, grid.firstChild);
  items.push(item);
}

masonry.prepended(items);
masonry.layout();

Ключевой момент: массив элементов должен содержать все новые DOM-элементы, уже вставленные в контейнер, иначе Masonry не сможет корректно рассчитать позиции.

Обновление анимации при добавлении

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

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

При вызове prepended() элементы плавно «появляются» на верхних позициях сетки, а остальные элементы смещаются.

Советы по производительности

  • Фрагменты документа: при добавлении большого числа элементов используйте DocumentFragment, чтобы снизить количество операций с DOM.
const fragment = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
  const item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = `Элемент ${i + 1}`;
  fragment.appendChild(item);
}

grid.insertBefore(fragment, grid.firstChild);
masonry.prepended(Array.from(fragment.children));
masonry.layout();
  • Оптимизация рендеринга: избегайте повторных вызовов layout() для каждого элемента; лучше собрать все новые элементы и вызвать метод один раз.

Особенности работы с динамическим контентом

  • Если контент загружается асинхронно (например, через AJAX), последовательность вставки и вызова prepended() остается той же: сначала DOM, затем Masonry.
  • Masonry корректно перераспределяет элементы, даже если высота новых блоков отличается.

Совместимость с методами append и prepend

Masonry поддерживает одновременное использование методов:

  • append() — добавление в конец сетки.
  • prepend() / prepended() — добавление в начало.

Важно различать:

  • prepend() — метод для вставки новых элементов через Masonry, автоматически добавляет их в DOM.
  • prepended() — уведомление Masonry о уже вставленных вручную элементах.
Оглавление