搜尋
首頁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 scrolling通過向下滾動您的頁面並檢查是否已加載新內容。您還可以使用瀏覽器開發人員工具來監視網絡請求並檢查是否正確並正確加載了新內容。

我可以在移動設備上使用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）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

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尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3 英文版

SublimeText3 英文版

推薦：為Win版本，支援程式碼提示！

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

顯示更多

熱門話題

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