Question

所以这是正在发生的事情。我有一个名为“home.html”的html文档。它包含许多div，每个div都是一个帖子。我也有一个index.html，并在其中有一个div #content。 index.html中的内容为空，但是通过.load（）调用在home.html中填充了div。另外，在.load调用中使用div：nth-child（-n + 10）我可以让它只加载前十个帖子。如何使用waypoint.js为此添加无限滚动？因此，一旦滚动条到达底部的75％，它将从home.html加载接下来的10个div。

Answer 1

在页面上加载10个元素后，连接一个将触发操作的jquery航点。

动作的第一步是禁用航点（因此它只会触发一次）。然后让它通过ajax加载其他数据并在页面上呈现它。（通过回调）完成后，您将重新激活航点，以便当用户向下滚动时，该过程将重新开始。

您的应用程序必须跟踪加载了多少元素和元素，因此您的ajax请求请求正确的数字（即10个已加载，因此下一个请求应从10开始并获取10，接下来应从20开始并获取10等。）

“75％的底部”很容易在航点上配置。你将使用“偏移量”。

查看waypoint documentation

我把触发无限滚动的DOM元素放在我拥有的主网格下面，所以当我加载更多内容时，它会自动将其推下去。

Answer 2

我使用了jquery masonry + waypoint js ..但是如果你不在砌体回调中注册waypoint，它会不止一次加载ajax调用附带的项目。这是我的解决方案;

//INFINITE SCROLL
    var $loading = $("#itemsloading"),
    $footer = $('footer'),
    opts = {
        offset: '120%',
        onlyOnScroll:false
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
            $loading.toggle(true);
            $.get($('.more').attr('href'), function(data) {
                var $data = $(data.result[0]);  
                if($(data.result[0]).length==0){
                    $loading.toggle(false);
                    return false;
                }
                $('#items').append( $data ).masonry( 'appended', $data, true, 
                        function(){
                            $footer.waypoint(opts);
                            });
                $loading.toggle(false);
            }); 
    }, opts);

如何用waypoint.js无限滚动？

2 个答案: