社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > js教程 > 6 jQuery无限滚动演示

6 jQuery无限滚动演示

Jennifer Aniston
发布： 2025-02-18 10:09:10
原创
771 人浏览过

6 jQuery无限滚动演示

现在，无限滚动是一个共同的功能，在几种情况下确实有用。例如，在某些网站上，我们根本无法想象一个良好的分页系统，例如Twitter甚至Facebook。无限滚动可能有用的另一个示例是搜索引擎：您需要在找不到想要的链接时继续查看新链接，而分页系统可以减慢您的研究。 如果您需要在项目中使用无限滚动，则可以将六个演示用作实施它的灵感。 请注意，除最后一个演示外，所有这些演示都用jQuery编写，一些示例正在使用jQuery插件。但是，其他示例可以轻松地适用于香草JS，没有任何问题。

钥匙要点

  • >本文介绍了六个有关如何实现无限滚动的演示，该功能允许连续滚动内容，而无需单击分页链接，改善用户体验和参与度。
    • 演示包括通过网格，博客文章，图像，数字，电子表格以及无限滚动和分页的组合进行无限滚动。每个演示都用jQuery编写，尽管它们可以适用于香草JS，有些可以使用jQuery插件。
  • >
    • 可以根据项目的需求来定制无限滚动的实现，例如调整加载消息，处理错误，处理动态内容，在没有更多内容时停止以及通过优化内容来提高性能。
    • 1。无限滚动和网格
该演示将jQuery砌体插件与无限滚动插件一起使用。砌体插件非常适合获取流体网格布局。保罗·爱尔兰（Paul Irish）的无限卷轴插件非常擅长加载已经存在的页面（因此对您的SEO有好处）。您可以使用它加载静态页面，例如page2.html，page3.html等，但是此插件还处理生成的页面，例如page.php？p = 2，page.php？p = 3。但是，要使用它，您需要在URL中有一个页码要增加，因此，如果您的页面（例如page.php？data = xxx），则此插件不适合您。

>用法 - jQuery
<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>
登录后复制
登录后复制
登录后复制

2。无限滚动通过博客文章
<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>
登录后复制
登录后复制
登录后复制

此演示不使用任何插件或库来处理无限的滚动功能。每次用户到达页面的结尾时，它都会加载一个新帖子，该帖子由PHP脚本生成，该帖子呼应相应的HTML代码。该演示永远不会达到内容的末尾，但是您可以通过例如在没有更多帖子显示的情况下呼应一个空字符串来实现这一目标。我们本着Twitter的精神在页面末端显示一个加载图像。

>请注意，在下面的实时演示中，新帖子是由JavaScript函数生成的，因为我们无法在Codepen中使用PHP脚本。 >请参阅codepen上的sitepoint（@sitepoint）浏览博客文章的笔

>用法 - html

>用法 - jQuery
<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>
登录后复制
登录后复制
登录后复制

3。无限滚动图像
<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>
登录后复制
登录后复制
登录后复制

此演示在无限卷轴上的图像中加载，并且永远不会达到末端。它使用jQuery无尽的卷轴插件，可以自定义以从屏幕底部触发X数量的像素数。演示克隆相同的图像并将它们插入列表的末尾等等，但是可以自定义脚本以很容易地加载来自不同源的图像。

>请参阅codepen上的sitepoint（@sitepoint）浏览图像的钢笔。

>用法 - html

>用法 - jQuery

<span><span><span><ul</span> id<span>="posts"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><article</span>></span>content<span><span></article</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span>
</span>
<span><span><span><p</span> id<span>="loading"</span>></span>
</span>	<span><span><span><img</span> src<span>="images/loading.gif"</span> alt<span>="Loading…"</span> /></span>
</span><span><span><span></p</span>></span></span>
登录后复制

4。数字

的无限列表 
<span>$(document).ready(function() {
</span>	<span>var win = $(window);
</span>
	<span>// Each time the user scrolls
</span>	win<span>.scroll(function() {
</span>		<span>// End of the document reached?
</span>		<span>if ($(document).height() - win.height() == win.scrollTop()) {
</span>			<span>$('#loading').show();
</span>
			$<span>.ajax({
</span>				<span>url: 'get-post.php',
</span>				<span>dataType: 'html',
</span>				<span>success: function(html) {
</span>					<span>$('#posts').append(html);
</span>					<span>$('#loading').hide();
</span>				<span>}
</span>			<span>});
</span>		<span>}
</span>	<span>});
</span><span>});</span>
登录后复制
这个演示使用与上一个相同的插件，但我们已将无限滚动应用于具有自己的垂直卷轴的列表。向下滚动时，数字只是将其简单地作为列表项目附加。

请参阅codepen上的sitepoint（@sitepoint）的无限数字列表。

>用法 - html

>用法 - jQuery

<span><span><span><ul</span> id<span>="images"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><a</span> href<span>="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/"</span>></span>
</span>			<span><span><span><img</span> src<span>="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480"</span> alt<span>=""</span> /></span>
</span>		<span><span><span></a</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span></span>
登录后复制

5。无限电子表格

<span>$(document).ready(function() {
</span>	<span>$(window).endlessScroll({
</span>		<span>inflowPixels: 300,
</span>		<span>callback: function() {
</span>			<span>var $img = $('#images li:nth-last-child(5)').clone();
</span>			<span>$('#images').append($img);
</span>		<span>}
</span>	<span>});
</span><span>});</span>
登录后复制
此演示使用与演示2相同的技术来检测用户何时到达文档的末尾，不仅是垂直且水平的。每次达到一端时，我们都会在表中添加一个新的行或新列。如果我们想创建电子表格应用程序，这正是我们可以编写的脚本类型。

>

请注意，所有单元格都是空的。 CSS计数器生成了行索引，因此我们不需要自己计算它们。

>

>请参阅codepen上的sitepoint（@sitepoint）的钢笔无限电子表格。

>用法 - html

>用法 - jQuery

<span><span><span><ul</span> id<span>="numbers"</span>></span>
</span>	<span><span><span><li</span>></span>1<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>2<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>3<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>4<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>5<span><span></li</span>></span>
</span>	…
<span><span><span></ul</span>></span></span>
登录后复制

6。无限滚动分页

<span>$(document).ready(function() {
</span>	<span>var offset = $('#numbers li').length;
</span>
	<span>$('#numbers').endlessScroll({
</span>		<span>fireOnce: false,
</span>		<span>fireDelay: false,
</span>		<span>loader: '',
</span>		<span>insertAfter: '#numbers li:last',
</span>		<span>content: function(i) {
</span>			<span>return '<li>' + (i + offset) + '</li>';
</span>		<span>}
</span>	<span>});
</span><span>});</span>
登录后复制
>有缺点反对无限滚动：如果不能很好地实现，则用户体验可能会被打破。如果让用户加载无限列表，则一段时间后他们可能会失去自己的位置。这是从未与传统的分页系统相关的事情。但是，分页需要用户无需无需使用无限滚动的操作。

>

这两个事实给了蒂姆·塞维安（Tim Severien）一个想法：如果我们将无限滚动和分页结合在一起，以利用这两种方法怎么办？结果是最后一个演示。

>向用户显示了初始页面。当用户向下滚动并到达页面底部时，将自动加载一个新页面。在这里，我们享受无限滚动的简单性。但是新事物来自屏幕底部的列表。

>

最初隐藏，此列表已填充，每次加载新页面时，此页面的数量。这样，如果用户想检索第二页，他们可以通过击中相应的数字而在任何努力中。

请参阅codepen上的sitepoint（@sitepoint）的钢笔无限滚动分页。

>用法 - html

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>
登录后复制
登录后复制
登录后复制
>用法 - JavaScript

请注意，此代码使用ES6，但是您可以轻松地将其转换为ES5。

结论
<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>
登录后复制
登录后复制
登录后复制

>我们研究了实施无限滚动的六个不同示例。无论您要构建什么，都应该能够使用其中一种技术来实现所需的结果。与往常一样，我们很想听听您的想法：您是否使用其中一种插件或技术来建造任何酷的东西？您是否有您认为应该提到的最喜欢的插件？在评论中让我们知道！

>

>常见问题（常见问题解答）

>如何在我的网站上实现jQuery无限滚动？

>在您的网站上实施jQuery infinite滚动涉及几个步骤。首先，您需要在HTML文件中包括jQuery库和无限滚动插件。然后，您需要初始化插件并指定要无限加载的内容。您可以使用ItemSelector选项并将其指向内容的类或ID。最后，您需要使用路径选项指定下一组内容的路径。这可以是返回URL的URL或功能。

>使用JQuery Infinite滚动有什么好处？它通过允许用户浏览内容而无需单击分页链接来改善用户体验。它还减少了服务器的负载，因为仅在需要时加载内容。此外，由于用户更有可能继续滚动和探索您的内容。 ，您可以在jQuery无限滚动中自定义加载消息。该插件提供了一个名为“加载”的选项，该选项允许您指定内容加载时要显示的文本和图像。您也可以使用CSS来样式加载消息。

>

>如何使用错误回调来处理jQuery无限滚动中的错误？当插件无法加载内容时，该功能被调用。您可以使用此回调显示错误消息或采取其他操作。

我可以使用动态内容的jQuery Infinite滚动？该插件提供了一种称为infscr（'bind'）的方法，您可以调用该方法将无限的滚动功能绑定到新加载的内容。

我如何在没有更多内容的情况下停止jQuery Infinite滚动？

>当不再使用INFSCR（“销毁”）方法的内容时，您可以停止jQuery无限滚动。这将删除无限的滚动功能并防止进一步的内容被加载。

我可以与其他jQuery插件一起使用jQuery Infinite滚动吗？

是的，可以与其他jQuery插件一起使用jQuery Infinite scrolling 。但是，您需要确保其他插件与无限滚动兼容，并且不会干扰其功能。

>

>我如何测试jQuery Infinite Scrolling？

您可以测试jQuery Infinite滚动通过向下滚动您的页面并检查是否已加载新内容。您还可以使用浏览器开发人员工具来监视网络请求并检查是否正确并正确加载了新内容。

我可以在移动设备上使用jQuery infinite滚动吗？

是的，是的，jquery infinite scrolling在移动设备上工作。但是，您需要确保您的网站响应迅速，并且无限的滚动功能在不同的屏幕尺寸上效果很好。

>

>我如何提高jQuery Infinite scrolling的性能？ jQuery无限滚动的性能通过优化您的内容。这包括减少图像的大小，缩小CSS和JavaScript文件，并使用服务器端分页一次限制加载的内容量。您也可以在视图中使用懒负载来加载图像。

>

以上是6 jQuery无限滚动演示的详细内容。更多信息请关注PHP中文网其他相关文章！

上一篇：jcanvas简介：jQuery遇到HTML5画布 下一篇：Sinon教程：使用模拟，间谍和存根的JavaScript测试
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2843
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2971
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2484
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
2415
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2458
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板