Параметры макетов

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

layoutMode

Свойство layoutMode определяет способ размещения элементов в контейнере. Доступные режимы:

  • masonry — классический режим кирпичной кладки, где элементы располагаются плотными колонками с минимальными вертикальными промежутками.
  • fitRows — элементы располагаются в ровные строки, каждая из которых имеет одинаковую высоту (высота строки определяется высотой самого высокого элемента).
  • vertical — элементы располагаются в одну вертикальную колонку, с возможностью анимации вертикальных смещений.
  • cellsByRow / cellsByColumn — сетка с фиксированными ячейками, где размеры элементов подгоняются под размеры ячеек.

Пример инициализации:

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

Настройка параметров Masonry

Для masonry доступны специфические опции, влияющие на плотность и поведение сетки:

  • columnWidth — ширина колонки. Может быть числом (в пикселях) или селектором элемента, от которого будет рассчитываться ширина колонки.
  • gutter — горизонтальный и вертикальный отступ между элементами. Указывается в пикселях.
  • fitWidth — логическое значение, определяющее, будет ли сетка занимать всю ширину контейнера или подстраиваться под содержимое.

Пример:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  masonry: {
    columnWidth: 200,
    gutter: 10,
    fitWidth: true
  }
});

Параметры FitRows

Для fitRows можно управлять горизонтальными и вертикальными отступами:

  • gutter — расстояние между элементами в сетке.
  • horizontalOrder — логическое значение, определяющее порядок элементов слева направо, игнорируя порядок в DOM.

Пример:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  fitRows: {
    gutter: 20,
    horizontalOrder: true
  }
});

Параметры Vertical

Режим vertical используется реже, но полезен при создании списков с анимированными смещениями:

  • gutter — вертикальный отступ между элементами.
  • horizontalAlignment — выравнивание элементов по горизонтали (left, center, right).

Свойства для всех макетов

Некоторые параметры универсальны для всех режимов:

  • percentPosition — если true, размеры и позиции рассчитываются в процентах относительно контейнера, что облегчает адаптивность.
  • transitionDuration — длительность анимации перемещения элементов, например '0.4s' или 400ms.
  • originLeft / originTop — определяет направление координатной системы: слева или справа, сверху или снизу.

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

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

Динамическая смена параметров

Isotope позволяет менять параметры макета на лету без пересоздания экземпляра. Для этого используется метод arrange:

iso.arrange({
  layoutMode: 'fitRows',
  fitRows: {
    gutter: 15
  }
});

Можно комбинировать фильтрацию, сортировку и перераспределение элементов одновременно.

Пользовательские макеты

Для сложных сценариев Isotope позволяет реализовать собственные макеты через расширение layoutMode. Это требует реализации методов:

  • reset — сброс внутреннего состояния макета перед расположением элементов.
  • layout — расчет позиций элементов.
  • getItemLayoutPosition — возвращает координаты для конкретного элемента.
  • needsResizeLayout — проверяет необходимость перерасчета макета при изменении размера контейнера.

Поддержка кастомных макетов позволяет создавать уникальные сетки с нестандартными правилами расположения и анимации.

Итог

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

Оглавление