jquery，追加完成后的砌体

我有下面的jQuery http://jsfiddle.net/XMdYw/7/

var elements = '';
var ELEMENT_COUNT_PER_PAGE = 301;
var page = 1;
for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
    elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>'
}
$('.imagecontainer').append(elements).masonry();​

它的问题是图像重叠，刷新页面后它会修复，但是一旦网站完全实现，它就会再次出现问题。

部分作品

我说它部分工作的原因是因为 IMG 上没有div.imgwrap 包装

var elements = '';
var ELEMENT_COUNT_PER_PAGE = 301;
var page = 1;
for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
    elements+= '<img src="lq/'+i+'.jpg" class="image-'+i+'"/>'
}
var $img = $(elements);
$img.on('load', function() {
    $('.imagecontainer').masonry('reload');
});
$('.imagecontainer').append(elements).masonry();

我尝试了以下方法

    var elements = '';
    var ELEMENT_COUNT_PER_PAGE = 301;
    var page = 1;
    for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
        elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>'
if(i==301){
$('.imagecontainer').masonry('reload');​
}
    }
    $('.imagecontainer').append(elements).masonry();​

我也试过

    var elements = '';
    var ELEMENT_COUNT_PER_PAGE = 301;
    var page = 1;
    for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) {
        elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>'
    }
var $imgs = $(elements);
    $('.imagecontainer').append($imgs).masonry( 'appended', $imgs );

所以

有没有办法在追加完成时捕获，然后使用div 包装的 img 应用.masonry();

此外

你会发现一个window.setTimeout也是解决方案，但有时图像在2秒内没有加载，并且长时间看着重叠的图像并不吸引人