jquery，追加完成后的砌体 [英] jquery, masonry after append complete

问题描述

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

I have the jQuery below 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();​

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

The issue with it is that the images are overlapping, after refreshing the page it fixes but once the site is completely realoded it has the issue yet again.

我说它部分有效的原因是因为 img 上没有 div.imgwrap 包装

the reason i say it works partially is because there is no div.imgwrap wrap on the img

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 一起应用

SO

is there maybe a way to catch when the append is complete and then apply .masonry(); with the img having the div wrap

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

you'll find a window.setTimeout is also the solution but someimtes the images havent loaded within 2 seconds and its not appealing looking at the overlapping images for long

推荐答案

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

这篇关于jquery，追加完成后的砌体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！