Метод insert

Метод insert в библиотеке Isotope используется для динамического добавления новых элементов в сетку и их анимационного размещения с учётом текущих настроек фильтрации, сортировки и расположения. Он позволяет расширять существующий контейнер без необходимости полной перезагрузки сетки через метод reloadItems() или полное пересоздание объекта Isotope.

Синтаксис

$grid.isotope('insert', $newItems);

Параметры:

  • $newItems — jQuery-объект или массив элементов DOM, которые необходимо добавить в контейнер Isotope.

Метод возвращает сам объект Isotope, что позволяет выстраивать цепочки вызовов.

Принцип работы

  1. Добавление элементов — новые элементы вставляются в DOM контейнера, но при этом Isotope автоматически учитывает текущие настройки фильтров и сортировки.
  2. Анимация — добавленные элементы плавно появляются на сетке, а существующие элементы могут смещаться, чтобы освободить место.
  3. Фильтрация и сортировка — если активен фильтр, новые элементы проверяются на соответствие условию и отображаются только в случае совпадения.
  4. Поддержка layout modes — метод корректно работает с различными режимами расположения (masonry, fitRows, vertical, packery и др.), автоматически рассчитывая позиции новых элементов.

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

Пример 1. Добавление одного элемента

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

var $newItem = $('<div class="grid-item">Новый элемент</div>');

$grid.isotope('insert', $newItem);

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

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

var $newItems = $(
  '<div class="grid-item">Элемент 1</div>' +
  '<div class="grid-item">Элемент 2</div>' +
  '<div class="grid-item">Элемент 3</div>'
);

$grid.isotope('insert', $newItems);

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

Работа с фильтрацией

Если активирован фильтр, новые элементы отображаются только если соответствуют текущему условию фильтрации:

$grid.isotope({ filter: '.active' });

var $newItem = $('<div class="grid-item active">Новый активный элемент</div>');
$grid.isotope('insert', $newItem); // элемент появится в сетке

var $hiddenItem = $('<div class="grid-item hidden">Скрытый элемент</div>');
$grid.isotope('insert', $hiddenItem); // элемент не отобразится из-за фильтра

Взаимодействие с методами appended и layout

Метод insert похож на appended, но отличается тем, что insert сразу вставляет элементы в DOM и учитывает фильтрацию, а appended добавляет элементы в контейнер без учета фильтров, требуя дополнительного вызова layout() для их позиционирования:

$grid.isotope('appended', $newItems); // добавляет элементы, но фильтры не применяются автоматически
$grid.isotope('layout');              // пересчитывает позиции

Использование insert упрощает этот процесс, объединяя добавление, фильтрацию и анимацию в одном методе.

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

  • DOM-элементы должны соответствовать селектору itemSelector, иначе Isotope их игнорирует.
  • Фильтры и сортировка применяются автоматически, поэтому нет необходимости вызывать filter() или sort() отдельно после вставки.
  • Работа с динамическим контентом — метод удобен для загрузки контента через AJAX и постепенного построения сетки.
  • Поддержка цепочек — метод возвращает объект Isotope, что позволяет комбинировать несколько вызовов:
$grid.isotope('insert', $newItems).isotope({ filter: '.active' });
  • Анимации — анимация добавления управляется опциями transitionDuration и hiddenStyle/visibleStyle. Например:
$grid.isotope({
  transitionDuration: '0.8s',
  hiddenStyle: { opacity: 0, transform: 'scale(0.5)' },
  visibleStyle: { opacity: 1, transform: 'scale(1)' }
});

Использование с AJAX

Часто метод insert применяется при подгрузке данных с сервера:

$.get('/load-more-items', function(data) {
  var $items = $(data);
  $grid.isotope('insert', $items);
});

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

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

Оглавление