Question

我正在开发一个项目，该项目使用jQuery Masonry和Infinite Scroll插件从Instagram使用其API加载“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张照片的大块）在线没有那么多文档，你能提供一小段演示或描述吗？

亲切的问候

Answer 1

1）这是否意味着此插件（无限滚动）需要具有“n”个数量的html文件

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

从无限滚动插件的角度考虑它。您可以在页面＃1中加载插件JavaScript，并在页面＃1内提供指向第2页的链接。现在，当用户滚动浏览页面＃1时，插件唯一的变量是当前页码，如2，或3或4（N）

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

因此，假设我有 / home / page / 2 之类的内容作为第1页中的下一个网址。该插件将其解析为数组

[/ home / page /，2]

并认为base_path = “/ home / page /”

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

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

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

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

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

同样，不需要创建HTML文件。您有两种选择来表示内容结束（不知道您提前有多少张图片）

当您达到“无内容条件”时，您可以返回HTTP 404.
或者你可以返回一个空字符串。

这是否回答了这个问题？

如何使用插件

第一页 - 包括 - NAV选择器 - 以实际方式加载THNIG
加载首页 - 使用Instagram分页并在您的javascript中存储“nextURL”
在滚动上 - 覆盖_determinePath以使用（2）提供您自己的提取网址 - 让插件检索该网址
覆盖插件内容选择器 - 因此它会将新元素返回给回调
关于插件获取内容 - 使用插件内部的回调来更新页面

更新github repo

我已经分叉了paul的github repo来添加PHP服务器端集成的文档。我相信插件假设下一个URL仅依赖于当前页码太严格了。我们需要从下一页内容中获取nextURL。

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

在基础仓库上提取请求 - https://github.com/paulirish/infinite-scroll/pull/219

我的javascript知识非常有限，也许你可以更好地扩展基本插件。然而，每一滴都有助于制造海洋：）

Answer 2

这是否意味着此插件（Infinite Scroll）需要在目录中包含“n”个html文件才能实现无限滚动？

是的，that particular plugin似乎只是为了支持静态页面，否则会使用“下一页”链接。 tutorial you found甚至表示它无法使用URL参数处理动态生成的内容，但我真的不相信。

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

通过设计该插件我会说否。当然，您应该能够使用（未知）数量的动态生成的页面与图片。这需要从instagram api提供服务器端代码，这似乎不是你想要的。

如何实施这种分页？（即只要用户不断向下滚动，就会加载20张照片的大块）在网上没有那么多文档，你能提供一小段演示或描述吗？

还有其他无限滚动插件。 site you found上的演示2和5实现了一个简单的“本机”（即无插件）无限滚动，两者都通过ajax加载新内容。演示3和4使用endless-scroll plugin和more scrolling options，但演示中不包含ajax。

现在，您可以自由决定如何实施脚本。您似乎想要首先从instagram获取所有图像URL，但只是chunkwise附加（因此加载图像文件）。如果instagram支持分页API，您可能希望将两个加载过程组合在一起。

这可以通过演示2到5中的代码完成 - 当滚动到达页面结束时，触发加载图像的请求。发生这种情况后，请在新的img元素（或instaframe divs，如您的示例中）上调用Masonry's appended method。

使用jquery实现无限滚动

2 个答案:

更新github repo