0

我在 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+= '<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 包装的 img应用

此外

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

4

1 回答 1

1
  1. 我建议您将高度和宽度添加到图像中，然后附加砖石。
  2. 附加所有图像后，调用 masonry.reload() 函数。
  3. 当图像加载时间过长时，使用 masonry 文档中描述的 imageloaded 函数
于 2012-06-21T18:15:57.877 回答