jQuery 路径点 +石工

Question

使用：jQuery Waypoints 和 Masonry 创建无限滚动的网格布局。分开后，它们工作得很好。但是，我不知道如何让他们一起工作。

Waypoints 代码

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

Masonry 代码（动画更新 9/18/2011）

var $j = jQuery.noConflict();
$j(function(){
$j('#mason3').masonry({
itemSelector: '.poster3',
isAnimated: !Modernizr.csstransitions
});  
});

我已经查看了 Masonry 无限滚动示例，但我无法让无限滚动在我的页面上工作（这就是为什么我首先使用 Waypoints ）。

问题是，当 div 加载了 Waypoints 时，它们无法通过 Masonry 正确地将自己对齐到网格中。最重要的是，加载的对象上的任何 rel= 标记都会被否定（也使用工具提示脚本创建 html 工具提示。）

所以基本上，我想要做的事情：[1] 当 div 加载到 via 中时航点，使用新加载的航点 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 并没有抛出任何错误。

Answer 1

这是非常简单但完整的解决方案，可以毫无困难地将它们组合起来：

<script src="js/vendor/masonry.pkgd.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-infinite.js"></script>

<script>
        $(window).load(function() {
            var container = $('.infinite-container');
            container.masonry({
                itemSelector: '.box'
            });
            $('.infinite-container').waypoint('infinite', {
                container: 'auto',
                items: '.box',
                more: '.infinite-more-link',
                offset: 'bottom-in-view',
                loadingClass: 'infinite-loading',
                onBeforePageLoad: $.noop,
                onAfterPageLoad: function() {
                    $(container).masonry('reloadItems');
                    $(container).masonry('layout')
                }
            });
        });
</script>