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

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

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


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

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

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

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

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

Tags: , , ,

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

5 Коментариев 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

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

    • Оставить сообщение

    Rotaban.ru - биржа банерной рекламы
    Видео курс - "JavaScript. Больше, чем просто сайт"

    Архивы