使用jquery實現無限滾動

Question

我正在開發一個使用jQuery Masonry和Infinite Scroll插件的項目，使用他們的API從instagram加載“n”張圖片。 看看這個簡短的例子，我的理解是我需要事先呈現要呈現的html頁面：

<nav id="page-nav">
  <a href="pages/2.html"></a>
</nav>

問題是，我真的不知道將檢索多少張圖片。 以下是我一次檢索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("<div class='instaframe'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.standard_resolution.url +"' /></a></div>");   
                }     

            }
        });


        } else {
        location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI"; 

        }

    });

我想我需要一個分頁機制，但基於上面提到的教程，我相信我首先需要預先定義要加載的html頁面。 所以現在我的問題

1. 這是否意味着這個插件（ Infinite Scroll ）需要在目錄中包含“n”個html文件才能實現無限滾動？
2. 如果我不知道我將擁有多少頁，是否可以使用相同的插件實現無限滾動。 甚至更好，甚至不必創建物理html文件？
3. 如何實現這種分頁？ （即只要用戶繼續向下滾動，就會加載20張照片的大塊）在網上沒有那么多文檔，你能通過演示或描述提供一小段步驟嗎？

親切的問候

Answer 1

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上 - 使用（2）覆蓋_determinePath以提供您自己的提取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知識非常有限，也許你可以更好地擴展基本插件。 然而，每一滴都有助於海洋:)

Answer 2

這是否意味着這個插件（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方法 。