使用jquery实现无限滚动
我正在开发一个使用jQuery Masonry和Infinite Scroll插件的项目，使用他们的API从instagram加载“n”张图片。 看看这个简短的例子，我的理解是我需要事先呈现要呈现的html页面：
问题是，我真的不知道将检索多少张图片。 以下是我一次检索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("
"); } } }); } 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张照片的大块）在网上没有那么多文档，你能通过演示或描述提供一小步吗？
亲切的问候
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页的下一个URL。 插件会将其解析为数组
[/家/页/ 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结构。 给定下一个URL，不可能总是推断出需要添加current_page_number的“基本路径”。 再看一下插件的_determinePath（）方法，看看它能处理什么样的URL。 它可以解析简单的URL结构，如page2.html或page = 2，但如果您的URL结构很复杂或者插件无法处理，您必须提供自己的实现。 查看pathParse（）方法。
2）如果我不知道我将拥有多少页面，是否可以使用相同的插件实现无限滚动。
同样，不需要创建HTML文件。 您有两种选择来表示内容结束（不知道您提前有多少张图片）
- 当您达到“无内容条件”时，您可以返回HTTP 404。
- 或者你可以返回一个空字符串。
这回答了这个问题吗？
如何使用插件
- 第一页 – 包括 – NAV选择器 – 以实际方式加载THNIGS
- 首页加载 – 使用instagram分页并在你的javascript中存储“nextURL”
- 在Scroll上 – 覆盖_determinePath以使用（2）提供您自己的提取URL – 让插件检索该URL
- 覆盖插件内容选择器 – 因此它返回新元素以进行回调
- 关于插件获取内容 – 使用插件内部的回调来更新页面
更新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知识非常有限，也许你可以更好地扩展基本插件。 然而，每一滴都有助于海洋:)
这是否意味着这个插件（Infinite Scroll）需要在目录中包含“n”个html文件才能实现无限滚动？
是的， 该特定插件似乎旨在仅支持静态页面，否则将使用“下一页”链接。 您发现的教程甚至声称它无法使用URL参数处理动态生成的内容，尽管我并不相信。
如果我不知道我将拥有多少页面，是否可以使用相同的插件实现无限滚动。 甚至更好，甚至不必创建物理html文件？
通过该插件的设计，我会说不。 当然，您应该能够使用（未知）数量的动态生成的页面与图片。 这需要从instagram api提供服务器端代码，这似乎不是你想要的。
如何实施这种分页？ （即只要用户继续向下滚动，就加载20张照片的大块）在网上没有那么多文档，你能通过演示或描述提供一小步吗？
还有其他无限滚动插件。 您找到的网站上的演示2和5实现了一个简单的“本机”（即无插件）无限滚动，两者都通过ajax加载新内容。 演示3和4使用无限滚动插件和更多滚动选项 ，虽然演示不包括ajax。
现在您可以自由决定如何实现脚本了。 您似乎想要首先从instagram获取所有图像URL，但只是chunkwise附加（因此加载图像文件）。 如果instagram支持分页API，您可能希望将两个加载过程组合在一起。
这可以通过演示2到5中的代码完成 – 当滚动到达页面结束时，触发加载图像的请求。 在那之后，在新的img元素（或者instaframe divs，就像你的例子中）中调用Masonry的appended方法 。