Параметры конфигурации по умолчанию

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

Понимание этих параметров позволяет контролировать:

  • алгоритм расположения элементов
  • способ фильтрации и сортировки
  • длительность и стиль анимаций
  • реакцию на изменение размеров окна
  • поведение скрытых элементов

Инициализация библиотеки выполняется следующим образом:

var iso = new Isotope('.grid', {
  // параметры конфигурации
});

Каждое свойство объекта определяет конкретный аспект работы движка компоновки.

layoutMode

layoutMode определяет алгоритм размещения элементов внутри контейнера.

Значение по умолчанию:

layoutMode: 'masonry'

Алгоритм masonry размещает элементы по принципу «каменной кладки», заполняя вертикальные колонки без фиксированных строк.

Другие доступные режимы:

Режим Описание
masonry каскадная сетка
fitRows равномерные строки
vertical вертикальный список
packery более сложная компоновка с плотной упаковкой
cellsByRow сетка по строкам
cellsByColumn сетка по колонкам

Пример изменения режима:

var iso = new Isotope('.grid', {
  layoutMode: 'fitRows'
});

itemSelector

itemSelector определяет CSS-селектор элементов, которыми управляет Isotope.

По умолчанию:

itemSelector: '.grid-item'

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

Пример структуры HTML:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Если используется другой класс:

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

percentPosition

Параметр percentPosition определяет, будут ли координаты элементов рассчитываться в процентах.

Значение по умолчанию:

percentPosition: false

Если установить:

percentPosition: true

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

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

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

transitionDuration

Параметр transitionDuration задаёт длительность анимаций перемещения элементов.

Значение по умолчанию:

transitionDuration: '0.4s'

При сортировке, фильтрации или перестроении сетки элементы плавно перемещаются.

Изменение длительности:

transitionDuration: '0.8s'

Полное отключение анимации:

transitionDuration: 0

hiddenStyle

hiddenStyle определяет CSS-стили для элементов, которые скрываются при фильтрации.

По умолчанию используется:

hiddenStyle: {
  opacity: 0,
  transform: 'scale(0.001)'
}

Элемент становится прозрачным и практически исчезает благодаря масштабированию.

Изменение поведения скрытия:

hiddenStyle: {
  opacity: 0,
  transform: 'translateY(100px)'
}

visibleStyle

visibleStyle задаёт стили для отображаемых элементов.

Значение по умолчанию:

visibleStyle: {
  opacity: 1,
  transform: 'scale(1)'
}

При появлении элементы возвращаются к нормальному размеру и полной непрозрачности.

Пример альтернативной анимации:

visibleStyle: {
  opacity: 1,
  transform: 'translateY(0)'
}

stagger

Параметр stagger добавляет задержку между анимациями элементов.

По умолчанию:

stagger: 0

Если задать:

stagger: 30

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

Можно использовать строку времени:

stagger: '0.05s'

resize

Параметр resize определяет, будет ли Isotope реагировать на изменение размеров окна браузера.

Значение по умолчанию:

resize: true

При изменении ширины окна сетка автоматически пересчитывается.

Отключение автоматического пересчёта:

resize: false

В таком случае компоновку придётся обновлять вручную:

iso.layout();

initLayout

Параметр initLayout определяет, выполняется ли начальная компоновка при создании экземпляра.

По умолчанию:

initLayout: true

Если установить:

initLayout: false

компоновка будет выполнена только после вызова метода:

iso.layout();

Это полезно при динамической загрузке данных.

containerStyle

containerStyle задаёт CSS-стили, применяемые к контейнеру сетки.

По умолчанию:

containerStyle: {
  position: 'relative'
}

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

При необходимости можно изменить:

containerStyle: {
  position: 'relative',
  overflow: 'hidden'
}

filter

Параметр filter задаёт начальный фильтр элементов.

По умолчанию:

filter: '*'

Звёздочка означает отображение всех элементов.

Пример начального фильтра:

filter: '.featured'

Будут отображаться только элементы с классом featured.

sortBy

Параметр sortBy определяет критерий сортировки элементов.

По умолчанию:

sortBy: 'original-order'

Элементы остаются в том порядке, в котором они расположены в DOM.

Пример сортировки:

sortBy: 'name'

Для работы сортировки необходимо определить функцию getSortData.

sortAscending

Параметр sortAscending определяет направление сортировки.

По умолчанию:

sortAscending: true

Значения:

Значение Результат
true сортировка по возрастанию
false сортировка по убыванию

Пример:

sortAscending: false

getSortData

getSortData определяет правила извлечения данных для сортировки.

Пример конфигурации:

getSortData: {
  name: '.name',
  price: '.price parseFloat',
  number: '[data-number] parseInt'
}

Возможные способы извлечения данных:

Тип Пример
текст из элемента .title
атрибут [data-price]
числовое значение parseFloat
целое число parseInt

Пример сортировки по цене:

sortBy: 'price'

sortHistory

Параметр sortHistory сохраняет предыдущие параметры сортировки.

Значение по умолчанию:

sortHistory: true

При повторной сортировке учитывается предыдущая последовательность критериев.

Отключение истории:

sortHistory: false

layoutInstant

layoutInstant определяет, должна ли компоновка выполняться без анимации.

По умолчанию:

layoutInstant: false

Если установить:

layoutInstant: true

элементы будут мгновенно перемещаться без переходов.

Это используется для ускорения операций фильтрации на больших наборах данных.

Полный пример конфигурации

Пример инициализации Isotope с набором основных параметров:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true,
  transitionDuration: '0.4s',
  filter: '*',
  sortBy: 'original-order',
  sortAscending: true,
  stagger: 30,
  resize: true
});

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

Оглавление