Метод add

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

Синтаксис

grid.add(items, options)
  • items — HTML-элемент, NodeList, массив элементов или jQuery-подобная коллекция. Это элементы, которые будут добавлены в сетку.
  • options (необязательный объект) — дополнительные настройки для добавляемых элементов.

Примеры настроек options:

  • index — позиция, в которую будет вставлен новый элемент. Если не указано, элемент добавляется в конец сетки.
  • layout — булевое значение. Если true, после добавления элементов автоматически выполняется перестройка сетки. По умолчанию true.
  • instant — булевое значение. Если true, перестройка сетки выполняется без анимации. Полезно для массового добавления элементов.

Основные возможности

Динамическое добавление

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

const grid = new Muuri('.grid');

const newItem = document.createElement('div');
newItem.className = 'item';
newItem.innerHTML = '<div class="item-content">Новый элемент</div>';

grid.add(newItem);

В этом примере новый элемент автоматически получает те же стили и поведение, что и существующие элементы сетки.

Контроль позиции вставки

Использование параметра index позволяет точно указать, где в сетке появится новый элемент:

grid.add(newItem, { index: 0 });

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

Автоматическое выполнение лэйаута

По умолчанию метод add вызывает перестройку сетки с анимацией. Если требуется массовое добавление элементов без визуальных скачков, можно использовать опцию instant:

grid.add([item1, item2, item3], { instant: true });

В этом случае все элементы добавятся сразу, а анимация будет отключена, что ускоряет рендеринг.

Взаимодействие с фильтрацией и сортировкой

Добавленные элементы автоматически учитываются фильтром и сортировкой, если они были ранее применены к сетке. Это означает, что новые элементы:

  • Могут быть сразу скрыты или показаны в зависимости от текущего фильтра.
  • Будут расположены в правильной позиции при активной сортировке.
grid.filter(item => item.getElement().classList.contains('active'));
grid.add(newItem); // Новый элемент будет автоматически проверен фильтром

Если элемент не проходит фильтр, он не появится на экране, но всё равно будет частью сетки и может быть показан при изменении фильтра.

Возвращаемое значение

Метод add возвращает массив объектов Item, которые были добавлены в сетку. Это позволяет сразу манипулировать новыми элементами:

const [addedItem] = grid.add(newItem);
addedItem.show(); // Показываем элемент, если он был скрыт фильтром

Каждый объект Item предоставляет полный набор методов Muuri для управления элементом: show, hide, remove, getElement и т.д.

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

  1. Множественное добавление: Для добавления большого количества элементов рекомендуется передавать их одним массивом, чтобы минимизировать количество вызовов перестройки сетки.
  2. Контроль анимации: Использование { instant: true } ускоряет добавление и предотвращает нежелательные визуальные эффекты.
  3. Совместимость с фильтрацией: Учитывать фильтры, чтобы новые элементы сразу отображались в нужном состоянии.
  4. Инициализация событий: Если элементы содержат интерактивные компоненты (кнопки, ссылки), необходимо убедиться, что события привязаны после добавления в сетку, либо использовать делегирование событий.

Пример массового добавления элементов

const items = [];

for (let i = 0; i < 50; i++) {
  const item = document.createElement('div');
  item.className = 'item';
  item.innerHTML = `<div class="item-content">Элемент ${i+1}</div>`;
  items.push(item);
}

grid.add(items, { instant: true, layout: true });

В данном примере создаётся 50 элементов, которые добавляются за один вызов, без анимации, и сетка автоматически перестраивается после добавления.

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

Оглавление