2

这就是正在发生的事情。我有一个名为“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。

4

2 回答 2

4

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

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

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

“到底部的 75%”很容易在航路点进行配置。您将为此使用“偏移量”。

查看航点文档

我将触发无限滚动的 DOM 元素放在我拥有的主网格下方，因此当我加载更多内容时，它会自动将其向下推。

于 2012-05-23T17:18:37.450 回答
1

我使用jquery masonry+waypoint js ..但是如果你没有在masonry回调中注册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);
于 2012-11-07T20:42:05.610 回答