Инициализация через JavaScript

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

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

Ключевые параметры:

  • itemSelector — селектор дочерних элементов контейнера, на которых будет применяться Isotope.
  • layoutMode — способ расположения элементов. Основные варианты: masonry, fitRows, vertical, cellsByRow.
  • percentPosition — логическое значение, указывающее, использовать ли проценты для размеров элементов, важно для адаптивного дизайна.
  • masonry — объект настроек для режима masonry, например, columnWidth и gutter.

Настройка Masonry

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

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: 10
  }
});
  • columnWidth может быть числом (фиксированная ширина) или селектором (ширина базового элемента).
  • gutter задаёт отступ между колонками.
  • percentPosition: true помогает адаптировать сетку под ширину контейнера без потери пропорций.

Инициализация с фильтрацией

Isotope позволяет динамически фильтровать элементы при инициализации:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  filter: '.category-1'
});
  • filter — CSS-селектор, задающий видимые элементы. Можно использовать классы, атрибуты или составные селекторы.
  • Фильтрацию можно изменять позже через метод arrange:
iso.arrange({ filter: '.category-2' });

Сортировка элементов

С помощью JavaScript можно управлять порядком элементов по разным критериям:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',
    price: '.price parseInt'
  },
  sortBy: 'name'
});
  • getSortData — объект, определяющий, как получать данные для сортировки.
  • Можно использовать встроенные функции, например parseInt, parseFloat, или кастомные функции.
  • Метод updateSortData() позволяет обновлять данные для сортировки после изменения содержимого элементов.

Обновление и перерасчет сетки

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

iso.reloadItems();
iso.layout();
  • reloadItems() — пересобирает внутреннюю коллекцию элементов.
  • layout() — выполняет перерасчет и выстраивает сетку заново.
  • Для динамически добавленных элементов используется метод appended:
var newItems = document.querySelectorAll('.new-grid-item');
iso.appended(newItems);

Инициализация с использованием событий

Isotope поддерживает события, которые позволяют выполнять действия на разные стадии:

  • arrangeComplete — вызывается после завершения фильтрации или сортировки.
  • layoutComplete — вызывается после перерасчета сетки.
  • removeComplete — после удаления элементов.

Пример:

iso.on('arrangeComplete', function(filteredItems) {
  console.log('Фильтрация завершена. Видимые элементы:', filteredItems.length);
});

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

Асинхронная инициализация

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

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

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

Резюме по параметрам и методам

Метод / Параметр Назначение
itemSelector CSS-селектор элементов сетки
layoutMode Режим расположения: masonry, fitRows, vertical, cellsByRow
percentPosition Использование процентов для размеров элементов
filter Селектор для фильтрации видимых элементов
getSortData Объект правил сортировки
sortBy Критерий сортировки
reloadItems() Пересборка коллекции элементов
layout() Перерасчет расположения элементов
appended(items) Добавление новых элементов в сетку
on(event, callback) Подписка на события (arrangeComplete, layoutComplete, removeComplete)

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

Оглавление