Пользовательские макеты

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

Настройка контейнера и элементов

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

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

itemSelector указывает на элементы внутри контейнера, которые будут организованы библиотекой. layoutMode по умолчанию может быть masonry, fitRows или vertical. Для создания пользовательского макета используется режим masonry как базовый или определяется полностью кастомный через getItemLayoutPosition.

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

Isotope позволяет расширять существующие режимы или полностью создавать новый. Основной механизм — это определение нового LayoutMode через Isotope.LayoutMode.create:

Isotope.LayoutMode.create('customLayout', {
  _resetLayout: function() {
    this.x = 0;
    this.y = 0;
  },
  _getItemLayoutPosition: function(item) {
    var position = {
      x: this.x,
      y: this.y
    };
    this.x += item.size.outerWidth + 10; // горизонтальный шаг
    if (this.x + item.size.outerWidth > this.isotope.size.innerWidth) {
      this.x = 0;
      this.y += item.size.outerHeight + 10; // переход на новую строку
    }
    return position;
  },
  _getContainerSize: function() {
    return { height: this.y };
  }
});

Ключевые моменты:

  • _resetLayout вызывается перед расстановкой элементов, и здесь инициализируются стартовые координаты.
  • _getItemLayoutPosition вычисляет координаты каждого элемента. Можно использовать любые формулы для создания диагональных, шахматных или нестандартных сеток.
  • _getContainerSize возвращает размеры контейнера после расстановки, что важно для корректной прокрутки страницы.

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

После создания нового режима, его можно подключить при инициализации Isotope:

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

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

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

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

Пользовательский макет полностью поддерживает анимацию и фильтрацию:

iso.arrange({
  filter: '.category-1',
  sortBy: 'original-order'
});
  • filter позволяет показывать только элементы с определённым классом.
  • sortBy управляет порядком расположения элементов. Можно определить собственные функции сортировки для кастомного макета.

Использование внешних данных для позиционирования

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

_getItemLayoutPosition: function(item) {
  var dataX = parseInt(item.element.getAttribute('data-x'), 10);
  var dataY = parseInt(item.element.getAttribute('data-y'), 10);
  return { x: dataX, y: dataY };
}

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

Важные советы по производительности

  • Минимизировать сложные вычисления в _getItemLayoutPosition при большом количестве элементов.
  • Использовать кэширование размеров элементов (item.size.outerWidth, item.size.outerHeight) для ускорения расчётов.
  • Вызывать layout только при изменениях, чтобы избежать лишних перерасчётов.

Комбинирование с другими режимами

Можно смешивать пользовательский макет с существующими режимами:

iso.arrange({ layoutMode: 'masonry' });
iso.options.layoutMode = 'customLayout';
iso.layout();

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

Пользовательские макеты в Isotope дают полный контроль над позицией, порядком и визуальной структурой элементов. Используя _getItemLayoutPosition и _resetLayout, можно создавать сложные композиции, которые невозможно реализовать стандартными режимами, при этом сохраняя фильтрацию и анимацию.

Оглавление