我在一页中有多个同位素容器。我能够使用 ajax 将新项目加载到每个容器中,但是当我尝试在使用 imagesLoaded 插件加载图像后重新布局项目时,它仅适用于最后一个容器。
一旦我通过 ajax 获得项目,我的代码如下:
//Get all the items
var $new_items = $($items).filter('.post-grid-item'),
slugs = {};
// check items and save slugs (containers ids)
$new_items.each(function(){
var sl =$(this).attr('data-slug');
slugs[sl] = '';
});
// loop for each unique id
for (var new_slug in slugs) {
// I insert the items into the isotope container
$('.posts-grid.'+new_slug).isotope('insert', $new_items.filter('[data-slug='+ new_slug +']') );
// I attached imagesloaded event to container to relayout once images are loaded
$('.posts-grid.'+new_slug).imagesLoaded( function() {
// Only runs on last container id - why?¿?¿
$('.posts-grid.'+new_slug).isotope('reLayout');
$('.posts-grid.'+new_slug).isotope('reloadItems');
});
}
似乎 imagesLoaded 只被挂在最后一个容器中,不知道为什么。我没有实时链接可以分享,抱歉