Опции инициализации

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

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

itemSelector

Описание: задаёт CSS-селектор для элементов, которые будут управляться Isotope. Все элементы, соответствующие этому селектору, становятся «item»-ами в сетке.

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

itemSelector: '.portfolio-item'

Особенности:

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

layoutMode

Описание: определяет метод расположения элементов в контейнере. Основные режимы:

  • masonry – элементы располагаются как кирпичная кладка, оптимально подстраиваясь по высоте.
  • fitRows – элементы выстраиваются в строки одинаковой высоты, заполняя строку по ширине.
  • vertical – элементы располагаются вертикально, один под другим.
  • cellsByRow – фиксированные ячейки по рядам и колонкам.

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

layoutMode: 'fitRows'

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

percentPosition

Описание: управляет тем, будут ли размеры и позиции элементов вычисляться в процентах (true) или в пикселях (false).

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

percentPosition: true

Применение:

  • При адаптивных макетах рекомендуется использовать true, чтобы элементы корректно масштабировались при изменении ширины контейнера.
  • Для фиксированных макетов можно оставить false, чтобы позиции вычислялись строго в пикселях.

masonry (объект опций)

Описание: специфический объект для режима masonry, позволяющий детально настраивать поведение сетки.

Основные свойства:

  • columnWidth – задаёт ширину колонки (может быть числом в пикселях или селектором элемента).
  • gutter – расстояние между элементами.
  • fitWidth – центрирует сетку в контейнере, если ширина элементов меньше ширины контейнера.

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

masonry: {
  columnWidth: '.grid-sizer',
  gutter: 20,
  fitWidth: true
}

Совет: использование элемента-сайдера .grid-sizer позволяет гибко управлять шириной колонок без ручного расчёта пикселей.

sortBy и getSortData

Описание: задают критерии сортировки элементов внутри контейнера.

sortBy – ключ сортировки (например, 'name', 'date'). getSortData – объект функций, каждая из которых возвращает значение для сортировки конкретного элемента.

Пример:

sortBy: 'name',
getSortData: {
  name: '.name',
  price: '.price parseInt'
}

Особенности:

  • Можно сортировать числовые и строковые значения.
  • Для чисел используется модификатор parseInt или parseFloat.
  • Сортировка обновляется динамически через метод arrange().

filter

Описание: определяет фильтр для отображаемых элементов сразу после инициализации.

Примеры фильтров:

filter: '.active'      // отобразить только элементы с классом .active
filter: function(itemElem) {
  return itemElem.dataset.category === 'js';
}

Особенности:

  • Поддерживаются CSS-селекторы и функции обратного вызова.
  • Фильтр можно изменять динамически через метод arrange() для интерактивных интерфейсов.

transitionDuration

Описание: задаёт длительность анимации при перестроении сетки.

Примеры значений:

transitionDuration: '0.6s'
transitionDuration: 400   // миллисекунды

Ключевой момент:

  • Можно задавать разные форматы: строки с единицами (s, ms) или числовое значение в миллисекундах.
  • Влияет на плавность анимации при фильтрации и сортировке.

stagger

Описание: задаёт задержку между анимацией последовательных элементов, создавая эффект «волны».

Пример:

stagger: 30   // миллисекунды

Применение:

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

Дополнительные параметры

  • originLeft / originTop – направление построения сетки (по умолчанию слева направо и сверху вниз).
  • resizeObserver – включает автоматическое обновление сетки при изменении размеров контейнера.
  • containerStyle – объект CSS-свойств, применяемых к контейнеру.
containerStyle: {
  position: 'relative',
  overflow: 'hidden'
}

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

Хотите, я подготовлю следующую главу, посвящённую динамическому обновлению и перестройке сетки с помощью методов Isotope?

Оглавление