Вертикальные и горизонтальные макеты

Библиотека Isotope предоставляет гибкую систему размещения элементов внутри контейнера. Одним из ключевых аспектов работы является выбор алгоритма компоновки — layout mode. От него зависит направление распределения элементов, их позиционирование и реакция на изменение размеров контейнера.

Макеты в Isotope можно условно разделить на две большие группы:

  • вертикально ориентированные
  • горизонтально ориентированные

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

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

Основы механизма layoutMode

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

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

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

layoutMode Описание
masonry вертикальная кладка
fitRows строки фиксированной высоты
vertical строго вертикальная лента
masonryHorizontal горизонтальная кладка
fitColumns колоночный горизонтальный макет
horizontal горизонтальная последовательность

Первые три режима относятся к вертикальным макетам, вторые три — к горизонтальным.

Вертикальные макеты

Вертикальные макеты являются наиболее распространёнными. Контейнер растёт по вертикали, а элементы распределяются сверху вниз.

Основные особенности

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

Вертикальные макеты используются в:

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

Masonry — вертикальная «кладка»

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

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

  1. Контейнер делится на колонки.
  2. Каждый элемент помещается в колонку с наименьшей текущей высотой.
  3. Высота колонок постоянно пересчитывается.

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

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

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

Настройка ширины колонок

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

Параметры:

параметр назначение
columnWidth ширина колонок
gutter расстояние между элементами

Использование адаптивных колонок

Часто колонка задаётся через элемент-разметку.

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

HTML:

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

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

Это позволяет адаптировать сетку под responsive-дизайн.

FitRows — строковый макет

Алгоритм fitRows размещает элементы строго по строкам, подобно flex-wrap.

Особенности

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

Пример

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

Когда используется fitRows

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

  • сеток товаров
  • иконок
  • карточек одинакового размера
  • элементов интерфейса

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

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

Недостаток:

  • плохо работает с элементами разной высоты

Vertical — линейный вертикальный макет

Режим vertical формирует одну колонку элементов, расположенных строго друг под другом.

Принцип

Элементы получают координаты:

x = 0
y = сумма высот предыдущих элементов

Пример

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

Настройка выравнивания

var iso = new Isotope('.list', {
  layoutMode: 'vertical',
  vertical: {
    horizontalAlignment: 0.5
  }
});

Параметр horizontalAlignment задаёт горизонтальное выравнивание.

значение результат
0 слева
0.5 по центру
1 справа

Горизонтальные макеты

Горизонтальные макеты работают противоположным образом: контейнер растёт по горизонтали, а элементы размещаются слева направо.

Основное применение:

  • горизонтальные галереи
  • слайдеры
  • таймлайны
  • карусели контента

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

MasonryHorizontal — горизонтальная кладка

Алгоритм masonryHorizontal является зеркальной версией обычного masonry.

Принцип

  1. Контейнер делится на строки.
  2. Элементы размещаются в строке с минимальной шириной.
  3. Контейнер расширяется вправо.

Пример

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

Настройка строк

var iso = new Isotope('.grid', {
  layoutMode: 'masonryHorizontal',
  masonryHorizontal: {
    rowHeight: 150,
    gutter: 10
  }
});

Параметры:

параметр назначение
rowHeight высота строки
gutter расстояние между элементами

FitColumns — колонный горизонтальный макет

Алгоритм fitColumns аналогичен fitRows, но работает в горизонтальном направлении.

Принцип размещения

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

Пример

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

Особенности

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

Horizontal — линейный горизонтальный макет

Режим horizontal создаёт простую горизонтальную последовательность элементов.

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

Каждый элемент получает координаты:

x = сумма ширин предыдущих элементов
y = 0

Пример

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

Использование

Такой режим подходит для:

  • лент изображений
  • горизонтальных меню
  • галерей
  • каруселей

Контейнер автоматически расширяется вправо по мере добавления элементов.

Сравнение вертикальных и горизонтальных макетов

Характеристика Вертикальные Горизонтальные
направление роста контейнера вниз вправо
тип прокрутки вертикальная горизонтальная
основной сценарий страницы и сетки галереи и карусели
популярные режимы masonry, fitRows masonryHorizontal, fitColumns

Переключение между вертикальным и горизонтальным макетом

Isotope позволяет динамически менять layoutMode.

Пример переключения

iso.arrange({
  layoutMode: 'masonryHorizontal'
});

Можно реализовать переключатель вида сетки.

document.querySelector('#switch').addEventListener('click', function() {
  iso.arrange({
    layoutMode: 'fitColumns'
  });
});

Это полезно для интерфейсов, где пользователь выбирает:

  • вертикальный список
  • горизонтальную галерею
  • сетку карточек

Влияние размеров элементов на макет

В Isotope координаты элементов вычисляются на основе:

  • ширины
  • высоты
  • gutter
  • размеров колонок или строк

После изменения размеров требуется пересчёт макета.

Перерасчёт

iso.layout();

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

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

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

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

Наиболее быстрые

  • fitRows
  • fitColumns
  • vertical
  • horizontal

Более тяжёлые

  • masonry
  • masonryHorizontal

Причина — необходимость вычисления оптимального размещения.

Комбинирование с фильтрацией

Любой макет работает вместе с фильтрацией.

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

При этом Isotope:

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

В вертикальных макетах элементы «поднимаются вверх», в горизонтальных — «сдвигаются влево».

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

Для корректной работы горизонтальной компоновки контейнер часто требует особых CSS-правил.

Пример

.grid {
  height: 600px;
}

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

Для горизонтальной прокрутки:

.wrapper {
  overflow-x: auto;
}

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

HTML:

<div class="controls">
  <button data-layout="masonry">Grid</button>
  <button data-layout="fitRows">Rows</button>
  <button data-layout="fitColumns">Columns</button>
</div>

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

Jav * aScript:

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

document.querySelectorAll('.controls button').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var mode = btn.dataset.layout;

    iso.arrange({
      layoutMode: mode
    });
  });
});

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

Оглавление