Режим cellsByRow

cellsByRow — режим компоновки элементов в библиотеке Isotope, предназначенный для размещения элементов по строкам с фиксированным количеством ячеек. Контейнер разбивается на сетку, где каждая строка содержит определённое число элементов, а элементы выстраиваются строго слева направо.

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

Этот режим напоминает классическую таблицу:

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

Подобная схема удобна для галерей, каталогов, карточек товаров, портфолио, где требуется равномерная сетка.

Принцип работы

В режиме cellsByRow контейнер делится на строки и столбцы. Количество столбцов определяется параметром:

columnWidth — ширина одной ячейки.

Высота строки задаётся параметром:

rowHeight.

Алгоритм размещения элементов:

  1. определяется ширина контейнера
  2. вычисляется количество столбцов
  3. элементы последовательно распределяются по строкам
  4. координаты каждой карточки рассчитываются по формуле
x = columnIndex * columnWidth
y = rowIndex * rowHeight

Где:

  • columnIndex — номер столбца
  • rowIndex — номер строки

Таким образом формируется строгая сетка.

Подключение режима

Использование cellsByRow выполняется через параметр layoutMode.

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

Контейнер .grid становится областью, в которой элементы .grid-item располагаются по строкам.

Базовая HTML-структура

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

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

Каждый элемент будет автоматически помещён в ячейку сетки.

Настройка размеров ячеек

Размер ячеек задаётся через объект cellsByRow.

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'cellsByRow',
  cellsByRow: {
    columnWidth: 120,
    rowHeight: 120
  }
});

В этом примере:

  • ширина ячейки — 120px
  • высота строки — 120px

Все элементы будут выровнены по сетке 120×120.

Автоматический расчёт столбцов

Количество столбцов зависит от ширины контейнера.

Формула:

columns = containerWidth / columnWidth

Например:

Ширина контейнера columnWidth Количество столбцов
1200px 200px 6
960px 200px 4
600px 200px 3

Это делает сетку адаптивной при изменении размеров контейнера.

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

Размеры элементов можно задавать в CSS.

.grid-item {
  width: 120px;
  height: 120px;
}

Однако для cellsByRow важнее параметры columnWidth и rowHeight, так как именно они определяют координаты размещения.

Если размеры CSS отличаются от настроек layout-режима, возможны:

  • наложение элементов
  • пустые области
  • неправильное выравнивание

Поэтому рекомендуется синхронизировать размеры CSS и настроек Isotope.

Использование селекторов для определения размеров

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

cellsByRow: {
  columnWidth: '.grid-sizer',
  rowHeight: '.grid-sizer'
}

HTML:

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

CSS:

.grid-sizer {
  width: 150px;
  height: 150px;
}

Isotope будет считывать размеры из элемента .grid-sizer.

Преимущества метода:

  • удобная адаптивность
  • контроль через CSS
  • меньше жёстких значений в JavaScript

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

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'cellsByRow',
  cellsByRow: {
    columnWidth: 150,
    rowHeight: 150
  }
});

CSS:

.grid {
  width: 900px;
}

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

При ширине контейнера 900px будет:

900 / 150 = 6 колонок

Размещение элементов:

1  2  3  4  5  6
7  8  9 10 11 12
13 14 15 ...

Добавление отступов между ячейками

Для расстояния между элементами используется CSS.

.grid-item {
  margin: 10px;
}

Однако необходимо учитывать, что Isotope рассчитывает позиции без учёта margin.

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

columnWidth = ширина + margin
rowHeight = высота + margin

Например:

width = 140px
margin = 10px
columnWidth = 160px

Пересчёт сетки

После изменения размеров контейнера или элементов необходимо вызвать перерасчёт.

iso.layout();

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

Адаптивная сетка

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

CSS:

.grid-item {
  width: 20%;
}

Jav * aScript:

cellsByRow: {
  columnWidth: '.grid-item',
  rowHeight: 200
}

Isotope будет вычислять ширину столбца по первому элементу.

Фильтрация элементов

cellsByRow полностью совместим с системой фильтров Isotope.

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

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

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

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

Например:

До фильтрации:

A B C D
E F G H

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

A C
E G

Сетка автоматически пересобирается.

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

Режим поддерживает сортировку.

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

После сортировки элементы снова распределяются по строкам:

A B C D
E F G H

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

Динамическое добавление элементов

Новые элементы можно добавлять после инициализации.

var items = document.querySelectorAll('.new-items');

iso.appended(items);

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

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

Удаление элементов

Удаление происходит через метод remove.

iso.remove(element);
iso.layout();

После удаления:

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

Сравнение с другими режимами

Режим Принцип
masonry элементы размещаются в свободные вертикальные области
fitRows элементы заполняют строки с учётом ширины
cellsByRow строгая сетка одинаковых ячеек
cellsByColumn заполнение по колонкам

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

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

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

Режим подходит для:

  • галерей изображений
  • каталогов товаров
  • карточек пользователей
  • коллекций иконок
  • портфолио проектов
  • списков приложений

Главное условие — одинаковый размер карточек.

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

cellsByRow имеет ряд ограничений.

1. Все элементы должны иметь одинаковые размеры

Иначе нарушается сетка.

2. Нет поддержки “каскадных” элементов

В отличие от masonry, элементы не могут занимать несколько строк.

3. Ограниченная гибкость компоновки

Сетка всегда строго табличная.

Оптимизация производительности

Для большого количества элементов полезно:

  • фиксировать размеры
  • избегать частых layout()
  • использовать делегирование событий
  • загружать изображения заранее

Особенно важно при галереях из сотен элементов.

Практический пример: галерея карточек

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 class="grid-item">5</div>
</div>

CSS:

.grid-item {
  width: 150px;
  height: 150px;
  background: #ddd;
  text-align: center;
  line-height: 150px;
}

Jav * aScript:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'cellsByRow',
  cellsByRow: {
    columnWidth: 150,
    rowHeight: 150
  }
});

Результат — равномерная сетка карточек, автоматически заполняющая строки.

Архитектура алгоритма размещения

Алгоритм работы режима можно представить так:

  1. вычисляется количество столбцов
  2. создаётся счётчик элементов
  3. для каждого элемента определяется позиция

Псевдокод:

for each element:
    column = index % columns
    row = floor(index / columns)

    x = column * columnWidth
    y = row * rowHeight

Это обеспечивает строгое линейное заполнение строк.

Визуальная схема

+----+----+----+----+
| 1  | 2  | 3  | 4  |
+----+----+----+----+
| 5  | 6  | 7  | 8  |
+----+----+----+----+
| 9  |10  |11  |12  |
+----+----+----+----+

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

Особенности поведения при изменении размеров окна

При ресайзе окна:

  1. изменяется ширина контейнера
  2. пересчитывается количество столбцов
  3. элементы перераспределяются

Например:

1200px → 6 колонок
800px → 4 колонки
400px → 2 колонки

Сетка автоматически адаптируется.

Итоговая характеристика режима

cellsByRow представляет собой табличный способ размещения элементов, в котором:

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

Благодаря предсказуемой структуре и простоте вычислений режим широко используется для интерфейсов с однородными карточками и строгими сетками.

Оглавление