BlocksIt -плагин позволяющий создавать динамическую сетку разметки. Он управляет преобразованием HTML элементов в "блоки " и располагает их в сетке страницы. Для этого достаточно указать количество столбцов, а всё остальное сделает плагин. Кроме того, вы можете даже объединить "блоки" и сделать один большой.
BlocksIt.js будет перепозиционировать выбранные элементы, используя абсолютное позиционирование. Он вычисляет верхнее и левое положение для элемента основываясь на определенных критериях:
- Запустить новый блок слева направо, и
- Поместить новый блок под самым коротким блоком.
Для использования, нужно подключить jQuery библиотеку и скрипт плагина:
Затем, вызываем функцию .BlocksIt()
на jQuery
объект. Возможны несколько настроек. $(document).ready(function() {
$("#objectID").BlocksIt();
});
И всё.
Если блоки содержат
элементы, то убедитесь, что для них заданы размеры до вызова функции .BlocksIt()
, также должны быть уверены в том, что изображения уже загружены. Для этого вы можете использовать $(window).load()
, чтобы убедиться, что в DOM
все загрузилось или использовать плагин, похожий на waitForImages для проверки статуса изображений.
При вызове плагина, можно указать несколько дополнительных параметров:
numOfCol:
Тип: Int По умолчанию: 5
Количество столбцов, которое будет создано.
offsetX:
Тип: Int По умолчанию: 5
Отступ слева и справа для каждого блока.
offsetY:
Тип: Int По умолчанию: 5
Отступ сверху и снизу для каждого блока.
blockElement:
Тип: String По умолчанию: ‘div’
Дочерний элемент, который будет преобразован в блоки.
Пример разметки:
...
...
...
...
...
Атрибут data-size указывает на размер блока (для комбинации блоков).
А скрипт вызова может быть похож на такой: $(document).ready(function() {
$("#container").BlocksIt({
numOfCol: 5,
offsetX: 8,
offsetY: 8,
blockElement: ".grid"
});
});
Пример, этой же галереи, но выполненной на фреймворке Bootstrap 3 :
Демо этой же галереи на Bootstrap 3 Создание галереи изображений подобной PinterestВторой вариант галереи изображений создадим на основе плагина Gridify . Данный плагин предназначен для создания сетки изображений как Pinterest.
Процесс создания этой галереи представим в виде следующих шагов:
Внимание: Существует несколько реализаций плагина gridify.js . В данном проекте выберем тот, который основывается на библиотеке jQuery.
$(function () { var options = { srcNode: "img", // grid items (class, node) margin: "15px", // margin in pixel width: "240px", // grid item width in pixel max_width: "", // dynamic gird item width resizable: true, // re-layout if window resize transition: "all 0.5s ease" // support transition for CSS3 }; $(".grid").gridify(options); });
2. Создание HTML кода галереи:
...
Просмотр изображения галереи будем осуществлять, как и в предыдущем примере, с помощью fancyBox.
Итоговый код галереи изображений подобной Pinterest для Bootstrap 4:
Bootstrap 4 - Создание адаптивной галереи изображений с помощью gridify.js img { padding: 4px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } img:hover { opacity: 0.6; filter: alpha(opacity=60); } ... $(function() { var options = { srcNode: "img", // grid items margin: "15px", // margin in pixel width: "240px", // grid item width in pixel max_width: "", // dynamic gird item width resizable: true, // re-layout if window resize transition: "all 0.5s ease" // support transition for CSS3 }; $(".grid").gridify(options); });
Пример этой же галереи на Bootstrap 3 .
В этом уроке мы рассмотрим создание макета страницы портфолио на основе плиточной сетки. Для создания сетки используются библиотеки и Dave DeSandro. Изображения, представленные в демо-версии, взяты с сайта Unsplash.com.
Masonry представляет собой сетку, базирующуюся на колонках. В отличие от сетки, созданной с помощью обтекания float , Masonry-сетка не имеет фиксированной высоты строк, что обеспечивает оптимальное использование пространства внутри веб-страницы, уменьшая любые ненужные пробелы. Такая сетка будет уместна на страницах-портфолио, страницах с галереями изображений, а также страницах с записями блога.
1. Метатеги и разделГалерея Masonry
2. Шапка страницыШапка страницы — раздел содержит следующие элементы-контейнеры:
— логотип ;
— главное меню