Вставка в произвольную позицию

Библиотека Masonry обеспечивает динамическое расположение элементов в сетке с учетом их размеров. Стандартное поведение подразумевает добавление элементов в конец контейнера, после чего Masonry автоматически перестраивает сетку. Для вставки элемента в произвольную позицию необходимо контролировать порядок DOM-элементов и корректно уведомлять Masonry о внесенных изменениях.

Методы работы с элементами

append и prepend

  • append добавляет элементы в конец контейнера и инициирует перерасчет сетки.
  • prepend вставляет элементы в начало контейнера.

Пример:

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

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

// Вставка в начало
msnry.prepend(newItem);

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

Вставка в середину

Чтобы вставить элемент в произвольную позицию:

  1. Определяется индекс, куда нужно вставить элемент.
  2. Используется метод DOM insertBefore или insertAdjacentElement.
  3. После манипуляции вызывается msnry.prepended() или msnry.appended(), в зависимости от того, как Masonry воспринимает элемент.

Пример вставки в середину:

let container = document.querySelector('.grid');
let newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.textContent = 'Элемент в середине';

// Вставка перед третьим элементом (индекс 2)
container.insertBefore(newItem, container.children[2]);

// Обновление Masonry
msnry.appended(newItem);

Важно: даже при вставке в середину Masonry воспринимает элемент как “новый”, поэтому метод appended инициирует перерасчет сетки корректно.

Использование массива элементов

Если требуется вставить несколько элементов в разные позиции одновременно, удобно создавать массив элементов и распределять их по DOM:

let items = [];
for (let i = 0; i < 5; i++) {
  let item = document.createElement('div');
  item.classList.add('grid-item');
  item.textContent = `Элемент ${i+1}`;
  items.push(item);
}

// Вставка перед пятым элементом
container.insertBefore(items[0], container.children[4]);
container.insertBefore(items[1], container.children[1]);

// Обновление Masonry
msnry.appended(items);

Обработка повторной компоновки

После вставки элементов в произвольные позиции часто требуется принудительная перекомпоновка сетки для корректного расположения всех элементов:

msnry.layout();

Метод layout() перерасчитывает позиции всех элементов, что особенно важно при динамическом изменении размеров элементов или контейнера.

Анимации при вставке

Masonry поддерживает CSS-анимации при добавлении новых элементов. Для этого:

  1. Задаются классы с анимацией появления (например, плавное увеличение opacity и трансформация scale).
  2. После вставки Masonry обновляет позиции, учитывая анимацию.

Пример CSS:

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

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

Пример Jav * aScript:

newItem.classList.add('grid-item');
container.insertBefore(newItem, container.children[2]);
msnry.appended(newItem);

// Запуск анимации через небольшую задержку
requestAnimationFrame(() => {
  newItem.classList.add('is-visible');
});

Важные нюансы

  • Вставка элемента напрямую в DOM без уведомления Masonry (appended/prepended) приведет к наложению элементов и некорректной сетке.
  • Метод insertBefore позволяет абсолютно точно указать позицию, но требует учета текущих элементов, так как Masonry ориентируется на порядок DOM.
  • Для элементов с переменной высотой рекомендуется всегда вызывать layout() после вставки нескольких элементов, чтобы избежать смещений.

Использование этих подходов обеспечивает точное позиционирование элементов в Masonry с сохранением гибкости и анимаций сетки.

Оглавление