php - jquery masonry images are overlapping until a page resize is done -

i've found template demonstrates issue i'm having jquery masonry , image layout. take @ twitter bootstrap template page:

the first time page loaded images stacked on each other until page refresh or re-size done. images displayed correctly.

here html , jquery has same problem:

html

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

jquery

$.post("functions/photo_functions.php", { f: 'getallphotos'}, function(data) {    $('#loading').hide();      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>' +         '</div>';          $(".gallery-masonry").append(img_block);           });          $('.gallery-masonry').masonry({           itemselector: '.item',           isanimated: true,           isfitwidth: true         });                    }      }, "json"); 

any idea why happening , how might fix it?

use imagesloaded() triggered masonry after images loaded. (imagesloaded() provided script http://github.com/desandro/imagesloaded.)

$('.gallery-masonry').imagesloaded( function(){   $('.gallery-masonry').masonry({    itemselector: '.item',    isanimated: true,    isfitwidth: true   }); });