Используем скрипт jQuery Masonry для оформления постов в стиле Pinterest. Masonry — вывод html блоков в виде кирпичной кладки Инициализируем плагин Masonry

В разделе блог. Данная фото тема WordPress будет нашим примером, но Вы наверняка видели использование jQuery Masonry и на других сайтах WordPress.

Что такое jQuery Mansory

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

На данном примере Вы можете увидеть принцип работы jQuery Masonry до и после использования:

Как Вы видите результат на лицо, если Вы использовать css float: left, то остаются пустые промежутки, необходимо использовать css position, которое довольно проблематично настроить, можно, НО зачем, в этом на поможет Masonry.

Используем jQuery Mansory на сайтах WordPress

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

jQuery(document).ready(function($){ $("#content_masonry").masonry({ singleMode: true }); });

$ ("#content_masonry" ) . masonry ({ singleMode : true } ) ;

} ) ;

Если у Вас блоки разной ширины, Вам необходимо использовать следующий код:

jQuery(document).ready(function($){ $("#content_masonry").masonry({ columnWidth: 300 }); });

jQuery (document ) . ready (function ($ ) {

$ ("#content_masonry" ) . masonry ({ columnWidth : 300 } ) ;

} ) ;

Где сolumnWidth это ширина сетки (в пикселях). Masonry будет следовать этим двум правилам:

  • Общая ширина элементов (высчитывается по данной формуле) = CSS width + padding-right+ padding-left + border-right-width + border-left-width + margin-right+ margin-left
  • При использовании columnWidth все элементы должны быть расположены горизонтально на расчёт ширины ColumnWidth (например, для ColumnWidth: 200, элементы будут начинаться с 0 или 200 или 400 пикселей и так далее). Это может не совсем понятно, но и ничего сложного в этом нет, смотрим картинку.

    • Первый элемент общей шириной 190px и margin-right: 0. А второй элемент имеет margin-left: 0, по идее эти два элемента должны прикасаться друг к другу. Но поскольку ColumnWidth имеет значение 200px, то второй элемент начинает отображаться на расстояние 200px.

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

    Итак чудеса jQuery Masonry и WordPress 3..

    Теперь немного по кодируем. Для начала подключим необходимые библиотеки jQuery и Masonry в файле header.php. Закиньте данный код в header.php (скачать Вы можете на офф сайте) :

    //подключаем jQuery //set the container that Masonry will be inside of in a var var container = document.querySelector("#masonry-loop"); //create empty var msnry var msnry; // initialize Masonry after all images have loaded imagesLoaded(container, function() { msnry = new Masonry(container, { itemSelector: ".masonry-entry" }); }); >