Типы макетов

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

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

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

Поддерживаемые типы макетов:

  • masonry
  • fitRows
  • vertical
  • packery
  • cellsByRow
  • cellsByColumn
  • masonryHorizontal
  • fitColumns
  • horizontal

Переключение между ними выполняется через параметр layoutMode.

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

При смене режима библиотека автоматически пересчитывает позиции элементов.

Masonry

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

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

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

Результат — плотная вертикальная сетка без пустот.

Особенности

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

Пример

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

Параметры masonry

columnWidth

Ширина базовой колонки.

columnWidth: 200

Допускается использование CSS-элемента:

columnWidth: '.grid-sizer'

gutter

Расстояние между колонками.

gutter: 10

FitRows

Макет fitRows располагает элементы по строкам, аналогично стандартной сетке.

Алгоритм работы:

  1. Элементы выстраиваются слева направо.
  2. После заполнения строки создаётся новая.
  3. Все элементы имеют одинаковую высоту строки.

Особенности

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

Пример

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

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

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

Главное ограничение — неэффективное использование пространства при разной высоте элементов.

Vertical

Макет vertical располагает элементы строго вертикально.

Каждый элемент занимает всю ширину контейнера.

Алгоритм:

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

Пример

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

Назначение

  • фильтруемые списки
  • ленты новостей
  • панели результатов поиска

Основная ценность режима — возможность фильтрации элементов без перестройки структуры списка.

Packery

Packery — расширенный алгоритм размещения элементов.

Работает по принципу двумерной упаковки (bin packing).

Алгоритм:

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

В отличие от masonry:

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

Подключение

Packery используется через дополнительный режим layoutMode.

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

Возможности

  • плотная упаковка элементов
  • поддержка drag & drop
  • сложные сетки

Packery часто применяется в интерфейсах dashboard.

CellsByRow

Макет cellsByRow делит контейнер на фиксированную сетку.

Принцип:

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

Пример

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

Параметры

columnWidth

ширина ячейки.

rowHeight

высота ячейки.

Каждый элемент занимает одну ячейку сетки.

CellsByColumn

Этот режим аналогичен предыдущему, но заполнение происходит по колонкам.

Алгоритм:

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

Пример

var iso = new Isotope('.grid', {
  layoutMode: 'cellsByColumn',
  cellsByColumn: {
    columnWidth: 150,
    rowHeight: 120
  }
});

Применение

  • фотогалереи
  • интерфейсы каталогов
  • визуализация данных

MasonryHorizontal

masonryHorizontal — горизонтальная версия masonry.

Отличия:

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

Пример

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

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

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

FitColumns

Макет fitColumns — горизонтальный аналог fitRows.

Алгоритм:

  1. элементы располагаются сверху вниз
  2. после заполнения колонки создаётся следующая

Пример

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

Характеристики

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

Horizontal

Макет horizontal размещает элементы строго по горизонтали.

Элементы располагаются в одну линию.

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

Особенности

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

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

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

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

Переключение происходит без перезагрузки страницы.

Часто используется вместе с кнопками интерфейса:

document.querySelector('#masonry').oncl ick = function() {
  iso.arrange({ layoutMode: 'masonry' });
};

document.querySelector('#rows').oncl ick = function() {
  iso.arrange({ layoutMode: 'fitRows' });
};

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

Макет Поддержка разных размеров Основная ориентация
masonry да вертикальная
fitRows ограниченная вертикальная
vertical нет вертикальная
packery да свободная
cellsByRow нет сетка
cellsByColumn нет сетка
masonryHorizontal да горизонтальная
fitColumns ограниченная горизонтальная
horizontal нет горизонтальная

Внутренний механизм работы layoutMode

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

Базовый процесс размещения:

  1. получение размеров контейнера
  2. измерение размеров элементов
  3. вычисление координат
  4. применение CSS-позиционирования

Элементы позиционируются через transform:

transform: translate3d(x, y, 0);

Такой подход:

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

Создание собственного макета

Isotope допускает расширение через пользовательские layout modes.

Базовая структура:

Isotope.LayoutMode.create('customMode');

Методы:

  • _resetLayout
  • _getItemLayoutPosition
  • _getContainerSize

Пример:

var Custom = Isotope.LayoutMode.create('customMode');

Custom.prototype._getItemLayoutPosition = function(item) {
  return {
    x: 0,
    y: 0
  };
};

Такой подход позволяет реализовать:

  • диаграммы
  • нестандартные сетки
  • визуализации данных

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

Несколько рекомендаций для эффективной работы layoutMode:

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

.grid-sizer {
  width: 25%;
}

Отложенная инициализация изображений

Совместное использование с библиотекой:

  • imagesLoaded

Минимизация DOM-операций

Лучше добавлять элементы пакетно:

iso.appended(items);

Выбор подходящего макета

Рекомендации по выбору:

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

  • masonry
  • packery

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

  • fitRows
  • cellsByRow

Списки

  • vertical

Dashboard

  • packery

Горизонтальные интерфейсы

  • masonryHorizontal
  • fitColumns

Правильный выбор layoutMode значительно влияет на:

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