Проблемы с загрузкой каменной кладки

Question

У меня проблема на одной из моих страниц, которая захватывает множество изображений с сервера, сбрасывает их на экран и использует кладку, чтобы выложить все.

Все изображения загружаются, но похоже, что каменная кладка вызывается до того, как изображения загрузились как внизу, все изображения загружаются в беспорядке. Я добавил несколько скриншотов, чтобы показать вам. Обратите внимание, что это происходит и на других страницах.

И некоторые из важных кода я использую.

<script> 
$.each($('.img-grid-container img'), function (index, obj) { 
    $(this).css({ 
     'width' : (50 + Math.round((Math.random()) * 330)) 
    }); 
}); 
</script> 

<script> 
var $container = $('.img-grid-container'); 

$container.imagesLoaded(function(){ 
    $('#grid-section').fadeIn("normal"); 
    $('#loader-container').hide(); 
    $container.masonry({ 
    itemSelector : '.attachment-full', 
    columnWidth: 30 
    }); 
}); 
</script> 

Любая помощь всегда приветствуется.

-R

Answer 1

[Я думаю, что это выглядит довольно круто, как это, просто сделать их draggables и ваши сделали ...] Так или иначе:

Ваш код Кладка выглядит хорошо для меня [у меня есть что-то почти идентичную работающий для меня] но:

• Все ли ваше JQuery внутри документа готово?
• Что произойдет, если вы сначала назовете каменную кладку, а затем затушите свой # сетку?
• Интересно, является ли ваш селектор контейнера проблемой. Если у вас несколько экземпляров этого класса на вашей странице, я не знаю, будет ли imagesLoaded запускаться после того, как первый или последний из этих экземпляров загрузится.?

[если это помогает вы можете использовать .masonry («перезагрузка») для сортировки кирпича в любое время]

Надежда, что помогает.