jquery，追加完成后的砌体答案

【问题标题】：jquery, masonry after append completejquery，追加完成后的砌体
【发布时间】：2012-06-23 23:52:09
【问题描述】：

我有下面的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 );

所以

有没有办法在追加完成时捕获，然后将.masonry(); 与具有 div wrap 的 img 一起应用

还有

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

【问题讨论】：

标签： javascript jquery for-loop append jquery-masonry

【解决方案1】：

我建议您将高度和宽度添加到图像中，然后附加砖石。
附加所有图像后，调用 masonry.reload() 函数。
如果图像加载时间过长，请使用砌体文档中描述的 imageloaded 函数

【讨论】：