Получение экземпляра Isotope

Для работы с библиотекой Isotope первым шагом является создание экземпляра объекта, который управляет сеткой элементов. Isotope предоставляет гибкий API для фильтрации, сортировки и анимации элементов на веб-странице. Экземпляр создаётся через конструктор Isotope, который принимает два параметра: контейнер элементов и объект опций.

var iso = new Isotope( '.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

Пояснение параметров:

  • .grid — CSS-селектор контейнера, содержащего элементы сетки.
  • itemSelector — CSS-класс элементов, которые будут управляться Isotope.
  • layoutMode — режим расположения элементов. Наиболее распространённые: masonry, fitRows, vertical.

Сохранение ссылки на экземпляр

После инициализации экземпляра важно сохранить ссылку на объект Isotope. Эта ссылка позволяет вызывать методы для обновления, фильтрации и сортировки элементов. Например:

var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

Теперь переменная iso содержит полноценный экземпляр, с которым можно работать далее.

Доступ к существующему экземпляру

Если экземпляр уже был создан, а доступ к нему нужен в другом месте кода, Isotope предоставляет метод data через jQuery или прямой доступ к свойству Isotope.data:

// С использованием jQuery
var iso = $('.grid').data('isotope');

// Без jQuery
var iso = Isotope.data(grid);

Метод data возвращает объект Isotope, связанный с конкретным контейнером. После этого доступны все методы экземпляра: arrange, shuffle, reloadItems и другие.

Особенности работы с несколькими экземплярами

В случае нескольких сеток на странице каждый контейнер инициализируется отдельно:

var iso1 = new Isotope('.grid-1', { itemSelector: '.item', layoutMode: 'fitRows' });
var iso2 = new Isotope('.grid-2', { itemSelector: '.item', layoutMode: 'masonry' });

Каждый экземпляр управляет только своими элементами. Для получения доступа к конкретному экземпляру необходимо использовать правильный контейнер при вызове Isotope.data.

Рекомендации по хранению экземпляров

  • Сохранять экземпляр в переменной с локальной или глобальной областью видимости, если планируется многократное обращение.
  • Для динамически создаваемых сеток экземпляр следует инициализировать сразу после добавления элементов в DOM.
  • Избегать повторной инициализации на одном и том же контейнере, чтобы не создавать лишние объекты и не нарушать работу фильтров и анимаций.

Получение экземпляра в сочетании с динамическим контентом

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

var newItems = document.querySelectorAll('.grid-item-new');
iso.appended(newItems);
iso.layout();

Метод appended обновляет внутренние структуры Isotope, а layout выполняет перерасчёт позиции элементов. Сохранённый экземпляр iso остаётся тем же объектом, что позволяет не создавать новый экземпляр при каждом изменении сетки.

Итоговая структура работы с экземпляром

  1. Инициализация через new Isotope(container, options).
  2. Сохранение ссылки на объект.
  3. Получение существующего экземпляра через Isotope.data(container) или jQuery.data('isotope').
  4. Использование методов экземпляра для управления элементами.
  5. Обновление и перерасчёт при добавлении или удалении элементов через appended, remove, reloadItems, layout.

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

Оглавление