horizontalOrder

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

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Инициализация производится на контейнере, в котором находятся элементы сетки:

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  horizontalOrder: true
});

Ключевые параметры:

  • itemSelector — CSS-селектор элементов, которые будут распределяться по сетке.
  • columnWidth — ширина колонки. Может быть числом или функцией.
  • gutter — расстояние между элементами.
  • horizontalOrder — если true, элементы будут размещаться слева направо, а не только по минимальной высоте колонки.

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

По умолчанию Masonry старается помещать каждый новый элемент в колонку с минимальной высотой, создавая эффект «кирпичной кладки». Включение параметра horizontalOrder меняет алгоритм: элементы располагаются в порядке их появления в DOM, сначала заполняя первую строку, затем следующую, при этом остаются все вертикальные и горизонтальные промежутки заданного gutter.

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

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

Чтобы Masonry корректно работал на разных ширинах экрана, обычно комбинируют его с CSS Grid или процентными значениями:

.grid {
  width: 100%;
}

.grid-item {
  width: 30%;
  margin-bottom: 10px;
}

Инициализация при адаптивной ширине:

var msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  percentPosition: true,
  gutter: 10,
  horizontalOrder: true
});
  • percentPosition: true позволяет Masonry рассчитывать позиции относительно ширины контейнера, что необходимо для резиновой верстки.
  • horizontalOrder гарантирует, что элементы будут идти в исходном порядке, даже если размеры блоков разные.

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

Masonry поддерживает добавление новых элементов после инициализации. С включенным horizontalOrder новые блоки будут вставляться по порядку:

var newItems = document.createElement('div');
newItems.className = 'grid-item';
newItems.textContent = 'Новый блок';
grid.appendChild(newItems);

msnry.appended(newItems);
msnry.layout();

Особенности:

  • appended — сообщает Masonry о новых элементах.
  • layout() — перерасчет расположения всех блоков с учетом horizontalOrder.
  • Порядок добавления сохраняется визуально слева направо.

Работа с изображениями и загрузкой контента

Для сеток с изображениями рекомендуется использовать imagesLoaded:

imagesLoaded(grid, function() {
  msnry.layout();
});

Это необходимо, чтобы Masonry корректно рассчитывал высоту блоков после полной загрузки картинок. При активном horizontalOrder это предотвращает «перескакивание» элементов и нарушенный порядок.

Комбинирование horizontalOrder с другими опциями

  • originLeft и originTop — задают направление осей; horizontalOrder корректно работает при стандартных значениях.
  • fitWidth — центрирует сетку по горизонтали; вместе с horizontalOrder элементы сохраняют порядок и при этом центрируются.
  • transitionDuration — позволяет плавно анимировать появление и перестановку элементов.

Пример:

var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  horizontalOrder: true,
  fitWidth: true,
  transitionDuration: '0.4s'
});

Частые ошибки при использовании horizontalOrder

  1. Неправильный порядок DOM — Masonry расставляет элементы в порядке DOM, поэтому любое изменение порядка через JavaScript после инициализации может нарушить визуальное расположение.
  2. Несовпадение ширин колонок — если columnWidth задано в пикселях, а контейнер адаптивный, горизонтальный порядок может сбиваться.
  3. Отсутствие layout() после добавления элементов — новые блоки не займут свои места автоматически.

Советы по оптимизации

  • Использовать percentPosition: true для адаптивной верстки.
  • Вызывать layout() после динамического изменения размеров блоков.
  • Совмещать с imagesLoaded для корректного расчета высот.
  • Для больших сеток можно включать transitionDuration, чтобы изменения были визуально плавными и не вызывали дергания контента.

Механизм horizontalOrder превращает Masonry из простого «кирпичного» расположения в упорядоченную сетку, которая сохраняет последовательность элементов, что особенно важно для галерей, карточек товаров и контента с логическим потоком.

Оглавление