6 jQuery無限滾動演示-js教程-PHP中文網

鑰匙要點

此演示不使用任何插件或庫來處理無限的滾動功能。每次用戶到達頁面的結尾時，它都會加載一個新帖子，該帖子由PHP腳本生成，該帖子呼應相應的HTML代碼。該演示永遠不會達到內容的末尾，但是您可以通過例如在沒有更多帖子顯示的情況下呼應一個空字符串來實現這一目標。我們本著Twitter的精神在頁面末端顯示一個加載圖像。

>用法 - jQuery

4。數字

5。無限電子表格

6。無限滾動分頁

>我們研究了實施無限滾動的六個不同示例。無論您要構建什麼，都應該能夠使用其中一種技術來實現所需的結果。與往常一樣，我們很想听聽您的想法：您是否使用其中一種插件或技術來建造任何酷的東西？您是否有您認為應該提到的最喜歡的插件？在評論中讓我們知道！

>如何使用錯誤回調來處理jQuery無限滾動中的錯誤？當插件無法加載內容時，該功能被調用。您可以使用此回調顯示錯誤消息或採取其他操作。

我如何在沒有更多內容的情況下停止jQuery Infinite滾動？

是的，是的，jquery infinite scrolling在移動設備上工作。但是，您需要確保您的網站響應迅速，並且無限的滾動功能在不同的屏幕尺寸上效果很好。

首頁

web前端

js教程

6 jQuery無限滾動演示

Jennifer Aniston

Feb 18, 2025 am 10:09 AM

6 jQuery無限滾動演示

現在，無限滾動是一個共同的功能，在幾種情況下確實有用。例如，在某些網站上，我們根本無法想像一個良好的分頁系統，例如Twitter甚至Facebook。無限滾動可能有用的另一個示例是搜索引擎：您需要在找不到想要的鏈接時繼續查看新鏈接，而分頁系統可以減慢您的研究。如果您需要在項目中使用無限滾動，則可以將六個演示用作實施它的靈感。請注意，除最後一個演示外，所有這些演示都用jQuery編寫，一些示例正在使用jQuery插件。但是，其他示例可以輕鬆地適用於香草JS，沒有任何問題。

鑰匙要點

>本文介紹了六個有關如何實現無限滾動的演示，該功能允許連續滾動內容，而無需單擊分頁鏈接，改善用戶體驗和參與度。
>

該演示將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來樣式加載消息。