Выравнивание блоков различной высоты с помощью jQuery Masonry

11 Sep, 2014

Как-то, делая очередной сайт, я озаботился тем, как сделать симпатичную ровную сетку из превью материалов различной высоты. Нечто подобное можно видеть на рамблере, к примеру. Сначала думал, что можно как-то исхитрится одним css, но потом понял, что нифига и надо юзать js, а точнее — jQuery плагин Masonry. Скрипт этот весьма популярный, работает стабильно и используется на многих сайтах. Здесь я покажу, как его заюзать применительно к drupal.

Для друпала существует модуль Masonry API, который вместе с модулями Masonry Fields, Masonry Views и Masonry Search позволяют сделать динамическую сетку для разных сущностей. Я, однако, не уловил, зачем для такой простой вещи надо возиться с кучей модулей, и обошелся без них, подключив скрипт прямо в шаблоне.

Итак, забираем скрипт, кладем его в директорию темы с остальными скриптами, и в файле YOURTHEME.info добавляем примерно следующее:

scripts[] = js/masonry.pkgd.min.js

Далeе я приведу пример, как сделать сетку из материалов для стандартной главной страницы drupal (site.com/node)

Сначала надо добавить немного css, указав ширину блоков и отступы. В данном случае блоки у меня будут занимать одну треть.

.front .node-teaser {
  width: 30%;
  margin-left: 3.333333333%;
}

Теперь инициализируем библиотеку:

// Masonry library
jQuery(window).load(function(){
  jQuery('.front .region-content .content').masonry({}) 
})

Этот код можно добавить к уже существующим скриптам или добавить в тему свой, прописав его в YOURTHEME.info.

Результат в теме Bartik:

Теги: 

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.