Современный веб-дизайн переполнен новинками. Страницы веб-сайтов можно листать как журналы, не редко на веб-страницах можно увидеть снег, дождь, да всё что угодно, в то время как Masonry Layout становятся новой нормой.
Определение Masonry LayoutаСкорее всего, название Masonry Layout взято из популярного плагина jQuery Masonry, который используется, чтобы генерировать такой тип макета. Блоки в макете Masonry чем то напоминают макет Flexbox. Макет Flexbox не требует дополнительного плагина, весь макет сделан с помощью CSS, смотрите о этом синтаксисе.
В отличие от других макетов, макет Masonry с фиксированной высотой строк. Основное предназначение макета Masonry, это оптимизировать использованное пространство внутри веб-страницы путем уменьшения не нужных пробелов.
Разработчики и дизайнеры привыкли делать блоки на веб-странице, обтекаемые с помощью CSS float:left . Но этот распространенный тип макета не принимает во внимание размер элементов. Вместо этого, он добавляет элементы один за другим, сначала по горизонтали, потом по вертикали. На следующем рисунке показана типичная веб-страница, которая использует обтекание для макета:
Блоки с помощью CSS
На рисунке видно что вокруг блоков много лишних зазоров. Такое расположение блоков делает макет более трудным для просмотра, так как высота страницы увеличивается за счет дополнительных пробелов. Это требует лишнею прокрутку переходя к нижней части страницы. Для таких случаев можно использовать фиксированный размер блока для каждой строки.
Плагин Masonry Layout окончательное решает эту проблему, он убирает свободное пространство между боками. На следующем рисунке видно, как предыдущий дизайн выглядит с помощью Masonry Layout. Обратите внимание, что высота страницы уменьшается, и планировка проще на глаз.
Блоки с помощью Masonry Layout
Веб-сайты с макетом Masonry LayoutПосмотрите на некоторые виды макетов в действии, ниже веб-сайты которые используют плагин Masonry:
Веб-сайт Pinterest использует макет Masonry Веб-сайт Thewall использует макет Masonry Веб-сайт Erik Johansson Photography использует макет Masonry Веб-сайт Thereason.us использует макет Masonry Практическое использование Masonry LayoutаМакет Masonry может обеспечить сайту; лучшую функциональностью, а также улучшить дизайн веб-страниц сайта. Ниже приведены практические примеры Masonry Layout:
- Галерея с изображениями — не просто делать набор изображений одинакового размера, без потери их качества. Masonry Layout являются отличным выбором для создания галереи с изображениями разных размеров.
- Для блога — страница блога обычно содержит список последних записей с кратким предисловием. Пока мы используем только один список записей в столбце, проблем никаких не будет. Но, с несколькими столбцами, список не представляется возможным с различной длиной предисловия. Чтобы сохранить целостность макета, необходимо ограничить суммарную длину. С Masonry Layout, мы можем перечислить последние посты в нескольких столбцах без необходимости обрезать предисловие записи.
- Портфолио — Masonry Layout можно использовать для портфолио, чтобы представить пользователю свои проекты, рисунки, изображения, или что-нибудь, что имеет отношение к вашему портфолио.
До сих пор мы обсуждали несколько практических вариантов использования Masonry Layout, но есть еще множество способов использовать этот стиль оформления. Если вы думаете об использовании Masonry Layoutа на вашем сайте, необходимо учитывать следующие моменты, прежде чем принимать решение:
Masonry Layout включает в себя некоторые дополнительные параметры, поэтому имеет смысл использовать плагин, а не делать его с нуля. Есть много популярных плагинов для создания Masonry Layout, с широким спектром возможностей. Ниже приведен список лучших плагинов Masonry Layout:
Особенности плагина Masonry LayoutПлагины, перечисленные в предыдущем разделе, помимо стандартного набора функций, содержат уникальные функции. Трудно понять разницу между каждым плагином, просто взглянув на макет Masonry. Все демонстрационные макеты совершенно не похожи друг на друга. Важно рассмотреть имеющиеся возможности, прежде чем выбрать плагин. Как правило, большинство плагинов предоставляет API и документацию, для определения их функций.
Советую посмотреть на все возможности каждого модуля, прежде чем сделать свой выбор. Ниже составлен список общих черт плагинов, перечисленных в предыдущем разделе. В списке, некоторые из основных особенностей каждого плагина, что бы помочь Вам, выбрать лучший плагин для вашего приложения.
- Размеры столбца, — плагин Masonry может быть с фиксированными и динамическими столбцами. Столбцы с фиксированным размером, являются стандартом. Лучше выбрать модуль, который позволяет сделать динамические столбцы, поскольку они повышают гибкость.
- Сортировка и Фильтрация — плагин, такой как Isotope позволяет сортировать и фильтровать элементы без потери структуры макета. Это хороший вариант, если вам необходимо динамический Masonry Layout.
- Анимация — в отличие от обычных макетов, Masonry Layout полностью меняет добавление или удаление элементов. Выглядит очень красиво.
- Динамические элементы — как правило, макеты страниц загружаются с помощью доступных элементов. Но некоторые сайты могут требовать возможность добавлять или удалять элементы без обновления. В таких случаях, плагин должен иметь возможность автоматическую настройку макета, чтобы обеспечить оптимальную структуру.
- Параметры макета — плагин позволит Вам самому указать ширину столбцов, размер, выравнивание и т.д…
Наиболее популярный плагин Masonry из предыдущего списка это masonry.desandro . Смотрите дальше пошаговое руководство для быстрого создания простого Masonry Layout:
Шаг 1 ЗаключениеПопробуйте поэкспериментировать с другими плагинами Masonry с различными настройками, чтобы увидеть больше вариантов Masonry Layout. Поделитесь своим опытом работы с плагинами Masonry, в комментариях ниже.
В разделе блог. Данная фото тема WordPress будет нашим примером, но Вы наверняка видели использование jQuery Masonry и на других сайтах WordPress.
Что такое jQuery MansoryMasonry можно считать дополнением к css, с помощью которого можно расположить элементы горизонтально, переходя в вертикальное положение в зависимости о ширины монитора. В результате минимизируются вертикальные зазоры между элементами различной высоты. Если Вы захотите сделать тоже при помощи css, поверьте мне у Вас будет много головной боли.
На данном примере Вы можете увидеть принцип работы jQuery Masonry до и после использования:
Как Вы видите результат на лицо, если Вы использовать css float: left, то остаются пустые промежутки, необходимо использовать css position, которое довольно проблематично настроить, можно, НО зачем, в этом на поможет Masonry.
Используем jQuery Mansory на сайтах WordPressMasonry можно использовать в двух случаях. Первый — это когда все ваши блоки с информацией одинаковой ширины, в этом случае Вам необходимо использовать данный кусок скрипта:
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 будет следовать этим двум правилам:
Первый элемент общей шириной 190px и margin-right: 0. А второй элемент имеет margin-left: 0, по идее эти два элемента должны прикасаться друг к другу. Но поскольку ColumnWidth имеет значение 200px, то второй элемент начинает отображаться на расстояние 200px.
Данный процесс не будет происходить, если мы не имеем в скрипте значение ColumnWidth и все элементы начинаются друг за другом, поэтому необходимо отделять их при помощи margin.
Итак чудеса jQuery Masonry и WordPress 3..Теперь немного по кодируем. Для начала подключим необходимые библиотеки jQuery и Masonry в файле header.php. Закиньте данный код в header.php (скачать Вы можете на офф сайте) :
//подключаем jQuery