Jump to content
  • 0

masonry


RodgerFox
 Share

Question

Доброй ночи, подскажите пожалуйста с настройкой плагина 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 by RodgerFox
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

Я если честно, плохо знаю джава скрипт, не могли бы вы подробнее описать "А при $(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' ) ? Верно?

Link to comment
Share on other sites

  • 0

Тут дело не в знании 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');
})

  • Like 1
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy