Jquery masonry примеры. Masonry Layout для оптимизации пространства

В разделе блог. Данная фото тема 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