Режим masonryHorizontal

Режим masonryHorizontal — один из вариантов раскладки элементов в библиотеке Isotope, предназначенный для построения горизонтальной «каменной кладки». В отличие от классического режима masonry, который заполняет вертикальные колонки сверху вниз, данный алгоритм выстраивает элементы в горизонтальные строки слева направо, автоматически распределяя их по рядам с различной высотой.

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

Алгоритм работает следующим образом:

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

В результате формируется динамическая горизонтальная сетка, напоминающая «кирпичную кладку», но повернутую на 90 градусов.

Отличие masonryHorizontal от других режимов

Сравнение с masonry

Свойство masonry masonryHorizontal
Направление заполнения сверху вниз слева направо
Основная ось вертикальная горизонтальная
Формирование колонок да нет
Формирование строк нет да

masonry создаёт колонки разной высоты.

masonryHorizontal создаёт строки разной ширины.

Сравнение с fitRows

Свойство fitRows masonryHorizontal
Высота строк одинаковая может отличаться
Асимметрия нет есть
Уплотнение элементов среднее максимальное

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

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

Алгоритм размещения элементов включает несколько этапов.

1. Создание строк

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

rowHeight

Если параметр не задан, Isotope вычисляет его автоматически.

2. Вычисление ширины строки

Для каждой строки хранится текущее значение:

occupiedWidth

Это суммарная ширина элементов, уже размещённых в строке.

3. Размещение нового элемента

Каждый новый элемент помещается:

в строку с минимальной текущей шириной

Псевдологика алгоритма:

найти строку с минимальной occupiedWidth
разместить элемент в этой строке
увеличить occupiedWidth строки

Это обеспечивает равномерное распределение элементов.

4. Позиционирование

После выбора строки рассчитываются координаты:

x = текущая ширина строки
y = индекс строки * высота строки

Элемент получает позицию через CSS:

transform: translate(x, y)

Базовое подключение режима

Минимальная конфигурация Isotope:

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

HTML структура:

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

CSS контейнера:

.grid {
  height: 300px;
}

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

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

Все параметры передаются через объект:

masonryHorizontal

Пример конфигурации:

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

Параметр rowHeight

Назначение

Определяет высоту одной строки сетки.

rowHeight: 120

Контейнер высотой 360px создаст:

360 / 120 = 3 строки

Использование DOM-элемента

Можно использовать элемент-шаблон:

rowHeight: '.grid-sizer'

HTML:

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

CSS:

.grid-sizer {
  height: 120px;
}

Этот подход облегчает адаптивную настройку сетки.

Параметр gutter

Назначение

Определяет отступ между элементами.

masonryHorizontal: {
  gutter: 10
}

Отступ применяется:

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

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

masonryHorizontal: {
  gutter: '.gutter-sizer'
}

HTML:

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

CSS:

.gutter-sizer {
  height: 10px;
}

Работа с элементами разной ширины

Режим раскрывается полностью при использовании элементов разной ширины.

CSS пример:

.grid-item {
  height: 100px;
}

.grid-item.wide {
  width: 300px;
}

.grid-item.medium {
  width: 200px;
}

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

HTML:

<div class="grid-item small"></div>
<div class="grid-item medium"></div>
<div class="grid-item wide"></div>

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

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

Количество строк зависит от:

containerHeight / rowHeight

Например:

containerHeight = 400px
rowHeight = 100px

Получаем:

4 строки

Если высота контейнера изменяется, требуется пересчёт layout.

Пересчёт раскладки

После изменения размеров контейнера выполняется:

iso.layout();

Или:

iso.arrange();

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

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

При изменении ширины окна рекомендуется вызывать пересчёт:

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

Часто используется debounce для уменьшения количества вызовов.

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

masonryHorizontal полностью поддерживает систему фильтров.

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

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

Фильтр:

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

После фильтрации сетка перестраивается автоматически.

Комбинация с сортировкой

Элементы могут быть отсортированы:

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

или

iso.arrange({
  sortBy: 'original-order'
});

После сортировки алгоритм заново распределяет элементы по строкам.

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

При большом количестве элементов рекомендуется:

Ограничение количества строк

Меньшее число строк ускоряет вычисления.

rowHeight → больше

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

Isotope применяет:

transform: translate()

вместо

top / left

Это обеспечивает:

  • аппаратное ускорение
  • плавную анимацию
  • минимальную нагрузку на layout браузера

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

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

requestAnimationFrame(function(){
  iso.appended(newItems);
});

Это предотвращает множественные перерасчёты.

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

Добавление новых элементов выполняется так:

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

iso.appended(newItems);

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

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

Удаление:

iso.remove(items);
iso.layout();

Сетка перестраивается без удалённых элементов.

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

Isotope автоматически анимирует:

  • перемещение элементов
  • появление
  • исчезновение

Скорость задаётся параметром:

transitionDuration: '0.4s'

Практические сценарии использования

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

Широкие изображения естественно занимают больше пространства, формируя динамическую горизонтальную ленту.

Карточки контента

Карточки различной ширины:

  • статьи
  • новости
  • видео

формируют плотную горизонтальную сетку.

Портфолио

Работы различного формата удобно распределяются по строкам, создавая визуально разнообразную композицию.

Типичные ошибки

Отсутствие фиксированной высоты контейнера

Без высоты контейнера Isotope не сможет определить число строк.

Неверно:

.grid {
}

Правильно:

.grid {
  height: 400px;
}

Несоответствие высоты элементов rowHeight

Если элементы выше строки, возникает наложение.

Правильный подход:

itemHeight ≤ rowHeight

Слишком маленький rowHeight

Маленькие строки создают слишком много рядов, что ухудшает производительность.

Внутренняя архитектура режима

masonryHorizontal реализован как расширение базового алгоритма Masonry.

Основные структуры:

rows[]

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

{
  width: number
}

Это текущая занятая ширина строки.

Процесс размещения

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

Этот подход обеспечивает равномерное заполнение пространства.

Совместимость с другими возможностями Isotope

Режим полностью совместим с:

  • фильтрацией
  • сортировкой
  • добавлением элементов
  • удалением элементов
  • анимацией
  • lazy loading

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

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

Режим оптимален в следующих ситуациях:

  • интерфейсы с широкими контейнерами
  • горизонтальные ленты контента
  • медиа-галереи
  • портфолио дизайнеров
  • карточные интерфейсы

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

Оглавление