Свойство rowHeight

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

Значение и типы

rowHeight может принимать несколько типов значений:

  1. Числовое значение Указывается в пикселях и задаёт фиксированную высоту строки.

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

    В данном примере каждая строка сетки будет иметь высоту 100 пикселей, а элементы будут размещаться в соответствии с этим ограничением. Элементы, высота которых меньше rowHeight, будут занимать меньше места, но промежутки между строками сохранятся.

  2. Функция Позволяет вычислять высоту строки динамически на основе контента.

    var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  masonry: {
    rowHeight: function( itemElem ) {
      return itemElem.clientHeight + 20;
    }
  }
});

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

  3. Селектор элемента Можно указать CSS-селектор элемента, высота которого будет использоваться для расчёта строк.

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

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

Особенности работы

  • Автоматическое выравнивание элементов: rowHeight позволяет Isotope правильно вычислять позиции элементов, обеспечивая ровные ряды и предотвращая наложение блоков.
  • Адаптивность: при изменении ширины контейнера Isotope пересчитывает позиции элементов с учётом rowHeight, что особенно важно для masonry-сетки.
  • Влияние на промежутки: при использовании числового значения промежутки между элементами фиксируются, а при функции или селекторе промежутки могут зависеть от размеров конкретных элементов.

Практические рекомендации

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

Связь с другими параметрами Isotope

  • masonry.columnWidth — задаёт ширину колонок, совместно с rowHeight определяет сетку.
  • transitionDuration — анимации пересчёта высоты строк зависят от изменения rowHeight.
  • percentPosition — влияет на позиционирование элементов в сетке с учётом rowHeight.

Использование rowHeight позволяет контролировать сетку на микроуровне: задавать фиксированные линии, равномерно распределять элементы, создавать адаптивные и эстетически приятные макеты. Настройка этого свойства — фундамент для построения сложных визуальных композиций с помощью Isotope.

Оглавление