jQuery航路点+；砖石建筑

使用：jQuery航路点和砌石创建无限滚动网格布局。除此之外，它们工作得很好。然而，我不知道如何让他们一起工作

航路点代码

$(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日动画更新）

我已经看过了砌体无限卷轴的例子，但我无法让无限卷轴在我的页面上工作（这就是为什么我开始使用航路点）

问题是，当div加载有航路点时，它们不能通过砌体将自己正确地对齐到网格中。除此之外，加载的对象上的任何rel=标记都是否定的（还使用工具提示脚本创建html工具提示）

因此，基本上，我要做的是：[1]当通过航路点加载DIV时，使用新加载的航路点DIV更新网格布局，同时保持来自所述DIV的任何数据完整（正确触发），就像前面提到的工具提示问题一样。这个问题的一个例子可以在现场直接看到。（页面设置为最初加载4个div，即前4个div，然后从以下页面加载4个div（如果适用），直到不再可用为止。）

.poster3是保存图像的div类，#mason是围绕动态创建的内容的选择器div

编辑 查看了来自Mashise站点的无限滚动代码，并将一些内容缝合在一起（尽管它没有捕获数据）：

---

不过Firebug并没有为此抛出任何错误

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

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

$（窗口）。加载（函数（）{
var container=$（'.infinite container'）；
容器砌体({
项目选择器：'.box'
});
$（'.infinite container'）。航路点（'infinite'{
容器：“自动”，
项目：“.box”，
更多：'.无限多链接'，
偏移量：“视图中的底部”，
loadingClass:“无限加载”，
onBeforePageLoad:$.noop，
onAfterPageLoad:函数（）{
$（容器）。砌体（“重新加载项目”）；
$（容器）.砌体（'布局'）
}
});
});

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

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