Paul Paul - 6 months ago 47
Javascript Question

jquery masonry images are overlapping until a page resize is done

I've found this template that demonstrates the issue I'm having with jquery masonry and image layout. Take a look at this twitter bootstrap template page:

The very first time the page is loaded all the images are stacked on each other until a page refresh or re-size is done. The images are then displayed correctly.

Here is my HTML and jQuery that has the same problem:


<div class="gallery-masonry masonry" style="position: relative; min-height:100px; height: auto;">
<div id="loading">Loading ...</div>


$.post("functions/photo_functions.php", { f: 'getallphotos'}, function(data) {


if(data) {
$.each(data.images, function(i, image) {
var img_block = '<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">' +
'<a href="#" class="thumbnail"><img src="'+image.url+'" alt=""></a>' +
'<div class="actions">' +
'<a title="" href="#" class="tip-top" data-original-title="Edit"><i class="icon-pencil icon-white"></i></a>' +
'<a title="" href="#" class="tip-top" data-original-title="Remove"><i class="icon-remove icon-white"></i></a>' +
'</div>' +


itemSelector: '.item',
isAnimated: true,
isFitWidth: true

}, "json");

Any idea why this is happening and how might I fix it?


Use imagesLoaded() to triggered masonry after all images are loaded. (imagesLoaded() is provided by the script

$('.gallery-masonry').imagesLoaded( function(){
   itemSelector: '.item',
   isAnimated: true,
   isFitWidth: true