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

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

14.07.2012381014

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 проверяет ширину окна и берет другой код для вызова плагина, уже с другим количеством колонок, посмотрите исходный код.



Сохраните в социальную сеть
Комментарии (14)
Я немного не понял: этот скрипт для uCoz'a? Он перерабатывает один вид материалов в другой что-ли...?
0
Нет, не для uCoz, для всего. Не будем прикреплять к вещам ярлыки. Можно это и для uCoz использовать, это же просто JQuery плагин.
-1
Наверное, можно сказать и так. Смотри Демо и все проясняется сразу. Плагин просто располагает блоки по-своему
-2
Мне одном укажется что оно убого смотрится?
0
Insider, вид мне лично нравится, красивый, хотя я реально считаю его не удобным
0
Красиво, но не удобно
0
Гость 14.07.2012 в 12:46Спам
ухты
0
Гость 14.07.2012 в 12:46Спам
"ДЖИГУРДЯТИНА" :D
0
ох Спасибо! отличный вид! то что мне надо! [на этом месте была реклама]
0
Алекс 14.07.2012 в 23:08Спам
Вообще классная вещь, можно использовать на сайтах портфолио, на сайтах тематики дизайна. Но в юзабилити не удобен, хоть и красив...
0
Гость 25.09.2012 в 21:46Спам
напиши по-порядку как вставлять. вызов плагина к чему цеплять? к большому контейнеру в котором все материалы или к виду каждого материала?
1
Aleksandr Popov 06.04.2013 в 00:42Спам
Я вот всё некак недопру как его поставить :(
1
Nik bik 30.05.2013 в 18:04Спам
как установить?
2
как поставить?
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт