Вид материалов как на Pinterest
BlocksIt.js – Jquery плагин создания динамического макета сетки. Говоря человеческим языком, плагин создает вид материалов как на Pinterest. Это один из самых популярных ресурсов на сегодняшний день, славится сайт и своим видом материалов. Вы просто пишите количество столбцов, плагин сам распределит блоки. Используйте вид материалов для своего сайта, лучше, когда на сайте у новостей будут картинки или фотографии, а возможно, что это будут какие-то другие изображения.
Как это работает?
Плагин BlocksIt.js выбранные элементы с помощью CSS (задает position:absolute). Основная функция – это рассчет верхней и левой позиции. Все это в отношении к другим блоком, так, чтобы было ровно.
Подключение JQuery и плагина BlocksIt.js (в секцию HEAD)
Вызов плагина
Вот еще один пример вызова плагина (с нужным количеством колонок)
Посмотрите демо, там сделаны адаптивные колонки. JQuery проверяет ширину окна и берет другой код для вызова плагина, уже с другим количеством колонок, посмотрите исходный код.
Как это работает?
Плагин BlocksIt.js выбранные элементы с помощью CSS (задает position:absolute). Основная функция – это рассчет верхней и левой позиции. Все это в отношении к другим блоком, так, чтобы было ровно.
Подключение JQuery и плагина BlocksIt.js (в секцию HEAD)
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="blocksit.js"></script>
<script type="text/javascript" src="blocksit.js"></script>
Вызов плагина
Code
$(document).ready(function() {
$('#objectID').BlocksIt();
});
$('#objectID').BlocksIt();
});
Вот еще один пример вызова плагина (с нужным количеством колонок)
Code
$('#container').BlocksIt({
numOfCol: 5
});
numOfCol: 5
});
Посмотрите демо, там сделаны адаптивные колонки. JQuery проверяет ширину окна и берет другой код для вызова плагина, уже с другим количеством колонок, посмотрите исходный код.
Создать сайт в uKit
Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Рейтинг лучших сервисов для самостоятельного создания сайта.
Легко! Если пользоваться нашими советами.
