Режим fitColumns

Режим fitColumns — это один из алгоритмов компоновки элементов в библиотеке Isotope, предназначенный для размещения блоков в виде равномерной сетки с колонками одинаковой ширины. Основная задача режима — распределить элементы по строкам, сохраняя выравнивание по колонкам, аналогично табличной структуре.

В отличие от режима masonry, где элементы могут иметь разную высоту и формируют «каскадную» структуру, fitColumns создаёт строгую сетку, в которой:

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

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

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

Алгоритм fitColumns работает по следующей логике:

  1. Определяется ширина контейнера.
  2. Рассчитывается количество колонок, которое может поместиться в контейнер.
  3. Элементы последовательно распределяются по колонкам.
  4. После заполнения строки начинается новая строка.
  5. Высота строки определяется максимальной высотой элемента в этой строке.

Схематично структура выглядит так:

[ A ][ B ][ C ]
[ D ][ E ][ F ]
[ G ][ H ][ I ]

Если один элемент выше остальных:

[ A ][ B ][ C ]
[ D ][ EEEEE ][ F ]
[ G ][ H ][ I ]

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

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

Режим включается через параметр layoutMode при инициализации Isotope.

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

Основные параметры

Параметр Назначение
layoutMode указывает используемый алгоритм компоновки
itemSelector селектор элементов сетки
fitColumns объект с дополнительными настройками

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

Для работы fitColumns используется стандартная структура контейнера и элементов.

<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: 200px;
  margin-bottom: 10px;
}

Фиксированная ширина элементов помогает алгоритму корректно вычислять количество колонок.

Настройки fitColumns

Режим поддерживает несколько параметров конфигурации.

gutter

Параметр gutter задаёт расстояние между колонками.

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

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

[ A ] 20px [ B ] 20px [ C ]

columnWidth

Позволяет явно задать ширину колонки.

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

Если параметр не указан, используется ширина элемента.

columnWidth через селектор

Можно использовать отдельный элемент как шаблон ширины колонок.

fitColumns: {
  columnWidth: '.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: 200px;
}

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

Поведение при изменении размера окна

При изменении ширины контейнера Isotope автоматически пересчитывает:

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

Пример:

window.addEventListener('resize', function() {
  iso.layout();
});

Однако обычно Isotope делает это автоматически.

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

Для создания адаптивной сетки используется процентная ширина элементов.

CSS:

.grid-item {
  width: 25%;
}

Инициализация:

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

При изменении ширины контейнера:

1200px → 4 колонки  
800px  → 3 колонки  
600px  → 2 колонки

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

Использование с фильтрацией

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

Инициализация:

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

Фильтрация:

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

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

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

Использование с сортировкой

fitColumns поддерживает сортировку элементов.

Настройка:

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

Сортировка:

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

После изменения порядка:

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

Отличие fitColumns от masonry

Характеристика fitColumns masonry
Тип сетки строгая каскадная
Высота строк фиксируется по самому высокому элементу свободная
Выравнивание по строкам по колонкам
Визуальный стиль табличный «Pinterest»

Пример masonry

[ A ]
[ B ][ C ]
[ D ][ E ][ F ]

Пример fitColumns

[ A ][ B ][ C ]
[ D ][ E ][ F ]

Таким образом fitColumns обеспечивает более структурированную компоновку.

Внутренний механизм позиционирования

Каждый элемент получает абсолютное позиционирование.

Пример вычисленных координат:

A → left: 0px
B → left: 220px
C → left: 440px

При переходе на новую строку изменяется координата top:

D → top: 180px
E → top: 180px
F → top: 180px

Эти координаты рассчитываются Isotope автоматически.

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

fitColumns считается одним из самых быстрых режимов компоновки в Isotope, поскольку:

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

Алгоритм фактически работает как:

row = floor(index / columns)
column = index % columns

Это делает режим эффективным даже при большом количестве элементов.

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

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

Разная высота элементов

Если элементы имеют сильно различающуюся высоту:

[ A ][ B ][ C ]

и

B = очень высокий

то вся строка увеличится по высоте.

В результате может появляться большое вертикальное пространство.

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

Последняя строка может содержать меньше элементов:

[ A ][ B ][ C ]
[ D ][ E ]

Это стандартное поведение режима.

Совмещение с CSS-анимациями

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

Пример:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitColumns',
  transitionDuration: '0.4s'
});

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

Практическое применение режима

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

Типичные сценарии:

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

товар | товар | товар
товар | товар | товар

Галереи изображений одинакового размера

фото | фото | фото
фото | фото | фото

Панели карточек

карточка | карточка | карточка
карточка | карточка | карточка

Панели инструментов и виджетов

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

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

Режим особенно полезен когда:

  • элементы имеют примерно одинаковую высоту
  • требуется симметричная сетка
  • важна простота и предсказуемость компоновки
  • не нужен «каскадный» стиль masonry

Когда режим не подходит

fitColumns менее эффективен в случаях:

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

В таких ситуациях обычно выбирается masonry.

Итоговые особенности режима

Ключевые свойства fitColumns:

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

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

Оглавление