Режим fitRows

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

Такой алгоритм компоновки напоминает поведение inline-block элементов или flexbox со свойством flex-wrap, но выполняется на уровне JavaScript-логики Isotope и тесно интегрирован с механизмами фильтрации, сортировки и анимации.

Основные особенности режима:

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

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

Принцип работы алгоритма

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

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

  1. Определяется ширина контейнера.
  2. Берётся первый элемент и размещается в координатах (0, 0).
  3. Следующий элемент добавляется справа от предыдущего.
  4. Проверяется, помещается ли элемент в текущей строке.
  5. Если элемент выходит за пределы контейнера — создаётся новая строка.
  6. Новый элемент размещается в начале следующего ряда.

Схематически расположение элементов можно представить так:

[ item ][ item ][ item ][ item ]
[ item ][ item ][ item ][ item ]
[ item ][ item ]

Каждый новый элемент проверяет доступное горизонтальное пространство.

Если:

currentX + itemWidth > containerWidth

то координаты изменяются:

currentX = 0
currentY += rowHeight

После этого элемент размещается в новой строке.

Базовая инициализация режима fitRows

Для активации режима используется параметр layoutMode.

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

Здесь:

  • .grid — контейнер сетки
  • .grid-item — элементы сетки
  • layoutMode определяет алгоритм размещения

HTML-структура обычно выглядит следующим образом:

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

CSS задаёт размеры элементов.

.grid-item {
  width: 200px;
  height: 150px;
}

В результате Isotope автоматически создаёт ряды из карточек.

Расчёт позиции элементов

При размещении каждого элемента Isotope вычисляет координаты:

  • X — позиция по горизонтали
  • Y — позиция по вертикали

Для первого элемента:

x = 0
y = 0

Для следующего:

x = previousX + previousWidth
y = currentRowY

Если элемент не помещается:

x = 0
y = previousRowY + rowHeight

Высота строки определяется самым высоким элементом в ряду.

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

Свойство gutter

Режим fitRows поддерживает параметр gutter, который задаёт расстояние между элементами.

Пример:

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

В этом случае между элементами появляется промежуток 20px.

Схематически:

[item] 20px [item] 20px [item]

Gutter применяется:

  • между элементами по горизонтали
  • между строками по вертикали

Использование CSS-элемента для gutter

Вместо фиксированного значения можно использовать gutter-элемент.

HTML:

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

JS:

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

CSS:

.gutter-sizer {
  width: 20px;
}

Такой подход удобен при адаптивных сетках.

Адаптивность сетки

Режим fitRows автоматически адаптируется к изменению ширины контейнера.

При уменьшении ширины браузера:

  • количество элементов в строке уменьшается
  • элементы переносятся на новые строки
  • пересчитываются координаты

Для корректной работы используется событие resize.

Isotope выполняет пересчёт автоматически:

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

При необходимости можно вызвать пересчёт вручную:

iso.layout();

Работа с фильтрацией

Одной из ключевых возможностей Isotope является динамическая фильтрация элементов.

При использовании fitRows элементы, не прошедшие фильтр, исключаются из расчётов.

Пример фильтрации:

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

iso.arrange({
  filter: '.category-a'
});

HTML:

<div class="grid-item category-a"></div>
<div class="grid-item category-b"></div>
<div class="grid-item category-a"></div>

После фильтрации:

  • скрытые элементы исчезают
  • оставшиеся перестраиваются в новые ряды

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

fitRows полностью поддерживает систему сортировки Isotope.

Пример:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',
    number: '.number parseInt'
  }
});

Сортировка:

iso.arrange({
  sortBy: 'number'
});

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

  • элементы меняют порядок
  • Isotope пересчитывает позиции
  • происходит плавная анимация перестройки

Анимация перестроения

Isotope использует CSS-трансформации для плавного перемещения элементов.

Когда меняется:

  • фильтр
  • порядок
  • размеры контейнера

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

Параметры анимации:

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

Можно отключить анимацию:

transitionDuration: 0

Различие между fitRows и masonry

Хотя оба режима формируют сетку, их логика принципиально различается.

fitRows

  • элементы располагаются по строкам
  • строки имеют одинаковую высоту
  • пустых пространств практически нет
[ ][ ][ ][ ]
[ ][ ][ ][ ]

masonry

  • элементы размещаются по колонкам
  • высота колонок различается
  • образуется «каменная кладка»
[ ] [ ]
[ ] [ ][ ]
[ ] [ ]

fitRows обеспечивает более строгую и предсказуемую сетку.

Ограничения режима

Несмотря на простоту, режим имеет ряд особенностей.

1. Отсутствие плотной упаковки

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

2. Нет перекомпоновки внутри строки

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

3. Одинаковая логика строк

Каждая строка строится строго последовательно.

Использование с динамическим добавлением элементов

Isotope поддерживает добавление элементов после инициализации.

HTML:

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

JS:

var newItems = document.createElement('div');
newItems.className = 'grid-item';

grid.appendChild(newItems);

iso.appended(newItems);

После добавления:

  • новый элемент вставляется в сетку
  • пересчитывается позиция
  • элемент занимает следующее свободное место

Перестроение сетки

Если размеры элементов изменяются динамически (например, загрузилось изображение), необходимо пересчитать layout.

iso.layout();

Часто используется вместе с библиотекой imagesLoaded:

imagesLoaded('.grid', function() {
  iso.layout();
});

Это предотвращает ошибки позиционирования до загрузки изображений.

Производительность

Алгоритм fitRows относительно лёгкий по вычислениям.

Сложность размещения элементов примерно:

O(n)

где n — количество элементов.

Каждый элемент обрабатывается один раз:

  • вычисляется ширина
  • проверяется доступное пространство
  • назначаются координаты

Это делает режим эффективным даже при сотнях элементов.

Типичные сценарии использования

Наиболее распространённые области применения режима fitRows:

Каталоги товаров

[товар][товар][товар][товар]
[товар][товар][товар][товар]

Галереи изображений

[фото][фото][фото]
[фото][фото][фото]

Портфолио проектов

[проект][проект][проект]
[проект][проект][проект]

Карточки статей

[статья][статья][статья]
[статья][статья][статья]

Комбинирование с другими настройками Isotope

fitRows часто используется вместе со следующими параметрами:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  percentPosition: true,
  transitionDuration: '0.3s',
  stagger: 30
});

Здесь:

  • percentPosition — использование процентных координат
  • transitionDuration — длительность анимации
  • stagger — задержка между анимациями элементов

Когда использовать fitRows

Режим fitRows подходит, когда требуется:

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

Этот режим считается одним из самых простых и стабильных способов построения сеточных интерфейсов в библиотеке Isotope.

Оглавление