搜索
首页web前端js教程6 jQuery无限滚动演示

6 jQuery无限滚动演示

Jennifer Aniston
Jennifer Aniston
Feb 18, 2025 am 10:09 AM

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> class<span>="grid"</span>>
	<span><span><span><div> class<span>="grid-item grid-item-2"</span>>
		<span><span><span><p>></p></span>content<span><span></span>></span>
</span>	<span><span><span></span></span></span></span>
</div></span>></span>
</span>	…
<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> id<span>="pagination"</span>></nav></span>
</span>	<span><span><span><p>></p></span><span><span><a> href<span>="page-2.html"</span>></a></span>Page 2<span><span></span>></span><span><span></span>></span>
</span><span><span><span></span>></span></span></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> class<span>="grid"</span>>
	<span><span><span><div> class<span>="grid-item grid-item-2"</span>>
		<span><span><span><p>></p></span>content<span><span></span>></span>
</span>	<span><span><span></span></span></span></span>
</div></span>></span>
</span>	…
<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> id<span>="pagination"</span>></nav></span>
</span>	<span><span><span><p>></p></span><span><span><a> href<span>="page-2.html"</span>></a></span>Page 2<span><span></span>></span><span><span></span>></span>
</span><span><span><span></span>></span></span></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> id<span>="posts"</span>></ul></span>
</span>	<span><span><span><li>></li></span>
</span>		<span><span><span><article>></article></span>content<span><span></span>></span>
</span>	<span><span><span></span>></span>
</span>
	…
<span><span><span></span>></span>
</span>
<span><span><span><p> id<span>="loading"</span>></p></span>
</span>	<span><span><span><img  alt="6 jQuery无限滚动演示" > src<span>="images/loading.gif"</span> alt<span>="Loading…"</span> /></span>
</span><span><span><span></span>></span></span></span></span></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> id<span>="images"</span>></ul></span>
</span>	<span><span><span><li>></li></span>
</span>		<span><span><span><a> href<span>="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/"</span>></a></span>
</span>			<span><span><span><img  alt="6 jQuery无限滚动演示" > 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></span>></span>
</span>	<span><span><span></span>></span>
</span>
	…
<span><span><span></span>></span></span></span></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> id<span>="numbers"</span>></ul></span>
</span>	<span><span><span><li>></li></span>1<span><span></span>></span>
</span>	<span><span><span><li>></li></span>2<span><span></span>></span>
</span>	<span><span><span><li>></li></span>3<span><span></span>></span>
</span>	<span><span><span><li>></li></span>4<span><span></span>></span>
</span>	<span><span><span><li>></li></span>5<span><span></span>></span>
</span>	…
<span><span><span></span>></span></span></span></span></span></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> class<span>="grid"</span>>
	<span><span><span><div> class<span>="grid-item grid-item-2"</span>>
		<span><span><span><p>></p></span>content<span><span></span>></span>
</span>	<span><span><span></span></span></span></span>
</div></span>></span>
</span>	…
<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> id<span>="pagination"</span>></nav></span>
</span>	<span><span><span><p>></p></span><span><span><a> href<span>="page-2.html"</span>></a></span>Page 2<span><span></span>></span><span><span></span>></span>
</span><span><span><span></span>></span></span></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中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
JavaScript数据类型：浏览器和nodejs之间是否有区别？JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055612无法在Windows 10中安装？
4 周前ByDDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前By尊渡假赌尊渡假赌尊渡假赌
<🎜>：种植花园 - 完整的突变指南
3 周前ByDDD
北端：融合系统，解释
4 周前By尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程
1675
14
CakePHP 教程
1429
52
Laravel 教程
1333
25
PHP教程
1278
29
C# 教程
1257
24
显示更多