MASONRY – ОТОБРАЖЕНИЕ HTML-БЛОКОВ В ФОРМАТЕ КИРПИЧНОЙ СТЕНКИ

Masonry — это скрипт для отображения блоков в виде кирпичной кладки.

Содержание:

• Что такое Masonry?
• Интеграция Masonry
• HTML-разметка
• CSS-стили
• Инициализация Masonry
  • Инициализация через HTML
  • Инициализация через jQuery
  • Инициализация для блоков с изображениями
• Свойства Masonry
• Masonry с помощью чистого CSS

Вы когда-нибудь видели веб-сайты, где блоки разных размеров отображаются в контейнере, максимально используя пространство?

Такое отображение стало возможным благодаря скрипту от Дэвида ДеСандро, который называется Masonry. Вы можете увидеть визуальный пример на официальном сайте скрипта. На этом сайте также имеется полная документация на английском языке.

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

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

Что такое Masonry?

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

Masonry может работать без дополнительных библиотек, но также может быть использован в качестве плагина для jQuery.

Интеграция Masonry

Для начала работы нужно загрузить необходимый пакет со скриптом Masonry. Вы можете скачать следующие файлы:

• masonry.pkgd.min.js — для пользователей
• masonry.pkgd.js — для разработчиков

Установка

Скачайте js файл и вставьте его в ваш сайт:

Или используйте CDN:

Для WordPress рекомендуется использовать функцию wp_enqueue_script():

add_action( 'wp_enqueue_scripts', 'mason_script' );

function mason_script() {
    // Masonry уже включен по умолчанию в WordPress
    wp_enqueue_script( 'masonry' );
}

HTML-разметка

Masonry работает с контейнерами, где каждый элемент имеет общий класс item:

  
...
  
...
  
...

Класс может быть любым, однако важно задать опцию itemSelector как '.item' при вызове Masonry.

CSS-стили

Для блока-контейнера необходимо задать ширину. Это ширина должна соответствовать контейнеру и параметру columnWidth:

.item { width: 25%; }
.item.w2 { width: 50%; }

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

Чтобы запустить скрипт, необходимо применить его к нашему контейнеру. Инициализация в чистом JavaScript выглядит так:

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  columnWidth: 200,
  itemSelector: '.item'
});

В конструктор передаются два аргумента: columnWidth и itemSelector (класс блоков в контейнере, с которыми будет работать Masonry).

Инициализация через HTML

Masonry также можно запустить без JavaScript, указав класс js_masonry для контейнера и установив параметры в атрибуте data-masonry-options:

Параметры в HTML должны быть в формате JSON. Обратите внимание, что значения в атрибутах должны быть в одинарных кавычках ', так как свойства JSON используют двойные ", и это важно.

Инициализация через jQuery

Masonry можно использовать без jQuery, но если вы предпочитаете jQuery, он будет работать как плагин:

var $container = $('#container');
// Инициализация
$container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});

Чтобы получить экземпляр Masonry, используйте метод .data('masonry'):

var msnry = $container.data('masonry');

Инициализация для блоков с изображениями

Проблема с блоками с изображениями возникает из-за того, что изображения загружаются отдельно от кода HTML. Это может привести к ошибкам — один блок может перекрывать другой. Происходит это потому, что Masonry срабатывает до того, как изображение завершит загрузку, задавая высоту для блока, а затем изображение "нарушает" эту высоту.

Способы решения проблемы:

Метод 1: Установите размеры для всех изображений явно (ширина и высота в пикселях).

Метод 2: Привяжите обработку Masonry к событию загрузки. jQuery код:

jQuery(window).load(function(){
  jQuery('.masonry').masonry({ columnWidth: 310, itemSelector: '.box, .item' });
});

Главный недостаток этого метода — вам, вероятно, придется ждать, пока загрузится всё содержимое окна.

Метод 3: Инициализируйте Masonry после загрузки всех изображений. Для проверки загрузки изображений используйте дополнительный JS-скрипт imagesLoaded:

var container = document.querySelector('#container');
var msnry;

// ��нициализация Masonry после загрузки изображений
imagesLoaded(container, function() {
  msnry = new Masonry(container);
});

jQuery код:

var $container = $('#container');
// Инициализация Masonry после загрузки изображений
$container.imagesLoaded(function() {
  $container.masonry();
});

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

Свойства Masonry

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

• itemSelector (строка) — определяет, какой дочерний элемент контейнера будет использоваться для построения Masonry.
• columnWidth (число/элемент/селектор как строка) — ширина колонки в пикселях.

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

var msnry = new Masonry(container, {
  itemSelector: '.item',
  columnWidth: 200,
});

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

gutter: 10 // расстояние между элементами

Masonry с помощью чистого CSS

Начиная с недавнего времени, большинство браузеров поддерживают CSS-свойство column-count. Это позволяет создавать подобные блочные структуры с использованием только CSS без JavaScript. Хотя этот метод менее гибок, он проще и быстрее в настройке и легче для понимания.

Пример блока в CSS

Вот как может выглядеть ваш HTML-код:

   
Lorem ipsum dolor sit amet.
   
...

А вот CSS-стили для него:

/* Контейнер Masonry */
.masonry {
  column-count: 4; /* сколько колонок нужно? */
  column-gap: 1em; /* расстояние между блоками */

  /* префиксы */
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}

/* Блоки Masonry */
.masonry .item {
  display: inline-block; /* важно! */
  width: 100%;           /* важно! */
  margin-bottom: 1em;
  background-color: #eee;
}

Имейте в виду, что этот метод имеет много недостатков по сравнению с Masonry на JavaScript. Например, блоки могут отображаться в неправильном порядке, если вы динамически добавляете элементы через AJAX.

Если вы планируете загружать элементы динамически, рекомендуется использовать Masonry на JavaScript.