Masonry - динамический layout

Masonry – динамический layout

В нескольких последних проектах столкнулся с плагином под названием masonry, который замечательно помогает экономить место на сайте в котором блоки с контентом идут по порядку, а с моими правками вообще превращается в клевый эффект, который произведет впечатление на любого пользователя.

На скрине наглядно видно эффект плагина. До применения все блоки обтекают друг друга из-за чего получается некрасивые строки и много свободного места, а после блоки расставлены наиболее оптимальным образом.

Я упоминал выше о моей модификации, теперь подробнее :), я изменил всего-лишь одну строчку, и на мой взгляд плагин от этого только выиграл. Для наглядности эффекта поресайзете окно браузера.

Моя модификация, а вот еще страничка с живым примером.

Параметры плагина для инициализации:

$('#wrapper').masonry({
singleMode: false,
// Этот параметр ставится в true, если все ваши блоки имеют одинаковую ширину
columnWidth: 240,
// Ширина колонки в вашей сетке, параметр по умолчанию - ширина первого блока
itemSelector: '.box:visible',
// Селектор блоков
resizeable: true,
// Перестройка сетки блоков при ресайзе окна
appendedContent: $('.new_content'),
// Объект элемента который вставляется в сетку динамически
saveOptions: true,
// Этот параметр сохраняет параметры инициализации первого вызова
}, function() {}
// callback.
);

Моя версия скрипта

Tags: JavaScript, jQuery, JS Plugins, Верстка

Воскресенье, Март 21st, 2010 JS Plugins, JavaScript, jQuery, Верстка

9 Коментариев to Masonry – динамический layout

Руслан:

21.03.2010 в 20:10

Уже знаю о нем, поздновато Вы :)

А что именно вы изменили?

Алексей:

22.03.2010 в 11:11

Добавил анимацию, в стандартном плагине при ресайзе окна они перестраиваются мгновенно.

Руслан:

22.03.2010 в 15:30

Это хорошо.

Допишите еще это скрипт
http://www.dillerdesign.com/experiment/DD_belatedPNG/

Сам нашел пару багов которые мой уровень java script не может решить основное, что если есть 2 картинки png на png в разных html тэгах то шаблон ломается.

льмир:

10.06.2010 в 00:16

Можно поподробнее как пользоваться этим скриптом?? Буду очень блогадарен!

Алексей:

10.06.2010 в 10:10

Документации по плагину у меня переведенной нет, плагин хорошо документирован на офф. сайте

Sponiabloonee:

26.11.2010 в 01:40

Доброго времени суток! Не вижу условия использования информации. Можно ли копировать написанный вами текст на свой сайт, если ставить ссылку на эту страницу?

Алексей:

28.11.2010 в 17:12

Можете копировать, указывая ссылку на сайт.