jQuery的，砖石追加完成后， [英] jquery, masonry after append complete

问题描述

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

  VAR元素='';
VAR ELEMENT_COUNT_PER_PAGE = 301;
VAR页面= 1;对于（VAR I =（ELEMENT_COUNT_PER_PAGE *（页面 -  1））; I＆LT; =（ELEMENT_COUNT_PER_PAGE *页）;我++）{
    元素+ ='＆LT; D​​IV CLASS =imgwrap＆GT;＆LT; IMG SRC =LQ /'+ I +JPG级=形象 - '+ I +/＆GT;＆LT; / DIV＆GT;'
}$（'。imagecontainer'）追加（元素）.masonry（）;
 

与它的问题是图像是重叠的，清爽的它修复页面后，但一旦该网站是完全realoded它再次有问题。

WORKS - 部分

我说，它的工作原理部分原因是因为在IMG

没有div.imgwrap包

  VAR元素='';
VAR ELEMENT_COUNT_PER_PAGE = 301;
VAR页面= 1;对于（VAR I =（ELEMENT_COUNT_PER_PAGE *（页面 -  1））; I＆LT; =（ELEMENT_COUNT_PER_PAGE *页）;我++）{
    元素+ ='＆LT; IMG SRC =LQ /'+ I +。JPG级=形象 - '+ I +/＆GT;'
}
变量$ IMG = $（元素）;
$ img.on（'负荷'，函数（）{
    $（'。imagecontainer'）砌体（刷新）。
}）;
$（'。imagecontainer'）追加（元素）.masonry（）;
 

我试过下面

  VAR元素='';
    VAR ELEMENT_COUNT_PER_PAGE = 301;
    VAR页面= 1;    对于（VAR I =（ELEMENT_COUNT_PER_PAGE *（页面 -  1））; I＆LT; =（ELEMENT_COUNT_PER_PAGE *页）;我++）{
        元素+ ='＆LT; D​​IV CLASS =imgwrap＆GT;＆LT; IMG SRC =LQ /'+ I +JPG级=形象 - '+ I +/＆GT;＆LT; / DIV＆GT;'
如果（我== 301）{
$（'。imagecontainer'）砌体（刷新）。
}
    }    $（'。imagecontainer'）追加（元素）.masonry（）;
 

和我也都试过

  VAR元素='';
    VAR ELEMENT_COUNT_PER_PAGE = 301;
    VAR页面= 1;    对于（VAR I =（ELEMENT_COUNT_PER_PAGE *（页面 -  1））; I＆LT; =（ELEMENT_COUNT_PER_PAGE *页）;我++）{
        元素+ ='＆LT; D​​IV CLASS =imgwrap＆GT;＆LT; IMG SRC =LQ /'+ I +JPG级=形象 - '+ I +/＆GT;＆LT; / DIV＆GT;'
    }
变量$ IMGS = $（元素）;    $（'。imagecontainer'）追加（$ IMGS）.masonry（'附加'，$ IMGS）。
 

SO

有可能办法赶上追加完成后，再申请 .masonry（）; 与具有分区保鲜的IMG

此外

您会发现一个window.setTimeout也是解决办法，但someimtes图像加载还没有在2秒内和它的吸引力并不大看重叠图像的长

解决方案

1. 我建议你的高度和witdh添加到图像，然后用砖石追加吧。


2. 您追加后的所有图像调用masonry.reload（）函数。


3. 当图像需要很长时间才能加载为砖石文档中描述imageloaded使用功能

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.

WORKS PARTIALLY

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();

I tried the below

    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();​

and i have also tried

    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 );

SO

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

furthermore

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. I suggest you to add the height and witdh to the image and then append it with masonry.
2. After you append all images call masonry.reload() function.
3. When the images take too long to load use function imageloaded as described in the masonry documentation

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