masonry

[RodgerFox]

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

Есть контейнер в нем контейнеры с которыми нужно работать aticle, он состоит из картинки, текст и формы. При загрузке страницы блоки со второй строчки накладываются на блоки выше... по логике замечаю что не успевает загрузится картинка, а скрипт уже выстраивает элементы. Но если окно браузера менять по размерам, то все выстраивается отлично! В чем может быть проблема?

Сначало выстраивал так:

$(document).ready(function() 
$('#container_products').masonry({ // выбираем элемент-контейнер в котором расположены блоки для динамической верстки
  itemSelector: '.product-gallery', // указываем класс элемента являющегося блоком в нашей сетке
	 singleMode: true, // true - если у вас все блоки одинаковой ширины
	 resizeable: true, // перестраивает блоки при изменении размеров окна
	 isAnimated: !Modernizr.csstransitions // анимируем перестроение блоков при помощи css transitions и Modernizr
 }); 
});

- Взял от суда _http://habrahabr.ru/sandbox/37498/

Попробовал взять пример с сайта с картинками:

 $(document).ready(function(){
        var $container = $('#container_products'); 

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.product-gallery'
  });

- вообще не выстраивается. Как быть? Кто может помочь?

Edited November 26, 2012 by RodgerFox

[nerv]

- вообще не выстраивается. Как быть? Кто может помочь?

сам себе помоги, ага? в своих темах принято отписываться

[RodgerFox]

Пробовал вчера (перед написанием топика)... и изотоп и масон. Постоянно конфликтуют со мной.

[mishka]

В браузерах на движке вебкит, при построении дерева документа размер картинок еще не известен, если он явно не задан в свойствах картинки width/height или в стилях.

Поэтому запускай скрипт на $(document).ready

А при $(window).load запускай .masonry( 'reload' )

Или если страничка долго грузится, то при построении дерева документа ($(document).ready) инитишь масонри, и запускаешь сетинтервал, в нем выполняешь .masonry( 'reload' ).

При полной загрузке останавливаешь сетинтервал и окончательно перестраиваешь блоки масотри (.masonry( 'reload' )).

[RodgerFox]

Картинки резиновые, как и сами блоки, ну были в начале.. теперь у блоков фиксированная ширина, но картинки все равно резиновые в нем.

Я если честно, плохо знаю джава скрипт, не могли бы вы подробнее описать "А при $(window).load запускай .masonry( 'reload' )"

Т.е. эта консструкция остется не изменной?

$(document).ready(function() 
$('#container_products').masonry({ // выбираем элемент-контейнер в котором расположены блоки для динамической верстки
  itemSelector: '.product-gallery', // указываем класс элемента являющегося блоком в нашей сетке
         singleMode: true, // true - если у вас все блоки одинаковой ширины
         resizeable: true, // перестраивает блоки при изменении размеров окна
         isAnimated: !Modernizr.csstransitions // анимируем перестроение блоков при помощи css transitions и Modernizr
 }); 
});

но добавляем перед последними скобами .masonry( 'reload' ) ? Верно?

[RodgerFox]

Подскажите пожалуйста

[mishka]

Тут дело не в знании JS, а в неохоте прочитать документацию к плагину http://masonry.desandro.com/docs/methods.html

$(document).ready(function() 
    $('#container_products').masonry({ // выбираем элемент-контейнер в котором расположены блоки для динамической верстки
        itemSelector: '.product-gallery', // указываем класс элемента являющегося блоком в нашей сетке
        singleMode: true, // true - если у вас все блоки одинаковой ширины
        resizeable: true, // перестраивает блоки при изменении размеров окна
        isAnimated: !Modernizr.csstransitions // анимируем перестроение блоков при помощи css transitions и Modernizr
    }); 
});
$(window).load(function() {
    $('#container_products').masonry('reload');
})

[RodgerFox]

=D ААА, красата.. Большое спасибо вам. Я видел ту документацию, но заметил пример шатамэлэ и пошел дальше смотреть, думал там написано только про дополнительные блоки в сетке.