使用:jQuery Waypoints 和 Masonry 创建无限滚动网格布局。除此之外,它们工作正常。但是,我无法弄清楚如何让他们一起工作。
航点代码
$(document).ready(function() {
var $loading = $(""),
$footer = $('footer'),
opts = {
offset: '100%',
continuous: 'true'
};
$footer.waypoint(function(event, direction) {
$footer.waypoint('remove');
$('body').append($loading);
$.get($('.more a').attr('href'), function(data) {
var $data = $(data);
$('#containerd').append($data.find('.poster3'));
$('.more').replaceWith($data.find('.more'));
$footer.waypoint(opts);
});
}, opts);
});
砌体代码(针对动画 2011 年 9 月 18 日更新)
var $j = jQuery.noConflict();
$j(function(){
$j('#mason3').masonry({
itemSelector: '.poster3',
isAnimated: !Modernizr.csstransitions
});
});
我查看了 Masonry Infinite Scroll 示例,但无法让 Infinite Scroll 在我的页面上工作(这就是我开始使用 Waypoints 的原因)。
问题是当 div 加载了 Waypoints 时,它们没有通过 Masonry 正确地将自己对齐到网格中。最重要的是,任何 rel= 标签在加载的对象上都会被否定(也使用 Tooltips 脚本来创建 html 工具提示。)
所以基本上,我想要做的是:[1] 当通过航点加载 div 时,使用新加载的航点 div 更新网格布局,同时保持来自所述 div 的任何数据完整(正确触发),就像前面提到的工具提示问题一样。可以在http://regchan.org/ib/dev/直接看到该问题的一个示例。(页面设置为初始加载 4 个 div,即前 4 个,然后从后续页面(如果适用)加载 4 个,直到没有更多可用。)
.poster3 是保存图像的 div 的类,#mason 是围绕动态创建的内容的选择器 div。
编辑 查看了 Masonry 网站的无限滚动代码,并将一些东西缝合在一起(尽管它没有抓取数据):
var $j = jQuery.noConflict();
$j(function(){
var $jcontainer = $j('#mason');
$jcontainer.imagesLoaded(function(){
$jcontainer.masonry({
itemSelector: '.poster3',
});
});
(function() {
var $jloading = $j(""),
$jfooter = $j('footer'),
opts = {
offset: '100%',
continuous: 'true'
};
$jfooter.waypoint(function(event, direction) {
$jfooter.waypoint('remove');
$j('body').append($jloading);
$j.get($j('.more a').attr('href'), function(data) {
var $jdata = $j(data);
$j('#containerd').append($jdata.find('.poster3'));
$j('.more').replaceWith($jdata.find('.more'));
$jfooter.waypoint(opts);
});
}, opts)});
// trigger Masonry as a callback
function( newElements ) {
var $jnewElems = $j( newElements );
// ensure that images load before adding to masonry layout
$jnewElems.imagesLoaded(function(){
$jcontainer.masonry( 'appended', $jnewElems, true );
});
}
}
);
不过,Firebug 并没有为它抛出任何错误。