Вид материалов как на Pinterest

Вид материалов как на Pinterest

2017-01-022171
BlocksIt.js – Jquery плагин создания динамического макета сетки. Говоря человеческим языком, плагин создает вид материалов как на Pinterest. Это один из самых популярных ресурсов на сегодняшний день, славится сайт и своим видом материалов. Вы просто пишите количество столбцов, плагин сам распределит блоки. Используйте вид материалов для своего сайта, лучше, когда на сайте у новостей будут картинки или фотографии, а возможно, что это будут какие-то другие изображения.

Как это работает?

Плагин 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>


Вызов плагина

Code
$(document).ready(function() {
  $('#objectID').BlocksIt();
});


Вот еще один пример вызова плагина (с нужным количеством колонок)

Code
$('#container').BlocksIt({
  numOfCol: 5
  });


Посмотрите демо, там сделаны адаптивные колонки. JQuery проверяет ширину окна и берет другой код для вызова плагина, уже с другим количеством колонок, посмотрите исходный код.


Masud 2017-01-15 в 22:14Спам
Инструкции нету по установке ?
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите.