javascript - 使用 jquery 实现无限滚动

Question

我正在做一个使用 jQuery Masonry 的项目。和 Infinite Scroll插件使用他们的 API 从 instagram 加载“n”数量的图片。看这篇短文example我的理解是，我需要事先准备好要呈现的 html 页面:

<nav id="page-nav">
  <a href="pages/2.html"></a>
</nav>

问题是，我真的不知道会检索到多少张图片。例如，这是我一次检索 20 张照片的方法。

    $(document).ready(function(){       
        var access_token = location.hash.split('=')[1];

        if (location.hash) {

              $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: "https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN",
            success: function(data) {

                for (var i = 0; i < 20; i++) {
            $("#instafeed").append("<div class='instaframe'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.standard_resolution.url +"' /></a></div>");   
                }     

            }
        });


        } else {
        location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI"; 

        }

    });

我想我需要一个分页机制，但根据上面提到的教程，我相信我首先需要预先定义要加载的 html 页面。所以现在我的问题在这里

这是否意味着这个插件(Infinite Scroll)需要在一个目录中有“n”个 html 文件才能实现无限滚动？

如果我不知道我将拥有多少页，是否可以使用相同的插件实现无限滚动。甚至不必创建物理 html 文件就更好了？

这种分页怎么实现呢？ (即，只要用户继续向下滚动，就可以加载 20 张图片 block )在线文档不多，您能否通过演示或描述提供一个简短的步骤？

亲切的问候

Answer 1

1)这是否意味着这个插件(无限滚动)需要有“n”个html文件

绝对不。您不需要预先生成静态html页面，您唯一需要的是一个URL方案，可以通过在URL中更改一个数字来获取后续页面内容。

从无限滚动插件的 Angular 来考虑。您在页面 #1 中加载插件 JavaScript，并在页面 #1 内提供指向页面 #2 的链接。现在，当用户滚动过去第 1 页时，插件拥有的唯一变量是当前页码，例如 2、3 或 4 (N)

插件需要创建 URL 以在用户滚动时获取内容。那么插件是如何做到的呢？该插件查看 page#1 中提供的下一个 URL 结构，对其进行解析并创建一个“基本路径”，它将继续添加 current_page_number 以获取后续内容。这就是 NAV 选择器的作用。

所以假设我有类似 的东西/home/page/2 作为第 1 页中的下一个 URL。该插件会将其解析为一个数组

[/home/page/,2]

并认为 base_path = "/home/page/"

当插件尝试获取 page_number 3 时，它只会将 3 附加到基本路径，例如 base_path.join(current_page_num) 使其成为 /home/page/3

在服务器端，我可以有一个 Controller 来处理所有/home/page/1 到/home/page/N 的链接。您只需查看插件内部，查找 _determinePath 并检索函数。

现在您也可以看到问题所在。问题在于，根据您在代码中进行分页的方式以及需要多少变量，可能存在无限多种 URL 结构。我做分页的方式与你做分页的方式不同。框架也是如此。 Drupal 分页方案可能与 Djanga 和 wordpress 等不同。

该插件不可能处理所有这些 URL 结构。给定下一个 URL，不可能总是推断出它需要添加 current_page_number 的“基本路径”。再看插件的 _determinePath() 方法，看看它可以处理什么样的 URL。它可以解析简单的 URL 结构，例如 page2.html 或 page=2，但如果您的 URL 结构复杂或插件无法处理，您必须提供自己的实现。也看看 pathParse() 方法。

2)如果我不知道我将拥有多少页，是否可以使用同一个插件实现无限滚动。

同样，无需创建 HTML 文件。您有两种选择来表示内容结束(不知道您事先有多少张图片)

当您达到“无内容条件”时，您可以返回 HTTP 404。

或者您可以返回一个空字符串。

这能回答问题吗？

它如何与插件一起使用

第一页 - 包括 - 导航选择器 - 以通常的方式加载 THNIGS

加载第一页 - 使用 instagram 分页并将“nextURL”存储在您的 JavaScript 中某处

On Scroll - 使用 (2) 覆盖 _determinePath 以提供您自己的获取 URL - 让插件检索该 URL

覆盖插件内容选择器 - 因此它将新元素返回到回调

在插件获取内容时 - 使用插件内部的回调来更新您的页面

更新 github repo

我已经 fork 了 paul 的 github repo 以添加 PHP 服务器端集成的文档。我认为插件假设下一个 URL 仅依赖于当前页码的限制过于严格。我们需要从下一页内容中获取 nextURL。

Github repo - https://github.com/rjha/infinite-scroll

对基础仓库的拉取请求 - https://github.com/paulirish/infinite-scroll/pull/219

我的 javascript 知识非常有限，也许您可​​以更好地扩展基本插件。然而，每一滴水都有助于形成海洋:)