jquery，追加完成后的砌体

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

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+= '
' } $('.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+= '' } 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+= '
' 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+= '
' } var $imgs = $(elements); $('.imagecontainer').append($imgs).masonry( 'appended', $imgs ); 

所以

是否有一种方法可以在追加完成后捕获，然后应用.masonry(); 与img有div包装

此外

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

Answer 1

1. 我建议你在图像上添加高度和高度，然后用砖石加上它。
2. 在追加所有图像后调用masonry.reload（）函数。
3. 当图像花费太长时间加载使用如砌筑文档中所述的图像加载function