反向加載infinityScroll響應內容

我想知道是否有可能以相反的順序加載infinityScroll響應內容。反向加載infinityScroll響應內容

現在的方式是，你有你的index.html上滾動加載外部page2.html然後page3.html等..所以當用戶想要添加的內容，他只是重複了pageX.html文件，修改的內容和分配對應的下一個數字到html文件。好又簡單吧？但是現在，最新的更新以最新的內容出現在頁面的底部，而不是最上層，就像最喜歡的那樣。

所以我盛大的想法是，如果用戶更新

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

到任何他外部HTML文件的最大數量，然後有infinityScroll顯示以相反的順序中的所有文件到page1.html作爲最後一個。

在它的工作原理是這樣的時刻：
的index.html - 加載順序
page1.html（最早）
page2.html
page3.html
page4.html以下文件（最新）

但我想它是這樣的：
index.html的 - 加載以下文件順序
page4.html（最新）
page3.html
page2.html
page1.html（舊）
，每當一個增加了一個頁面它將「對堆棧的頂部土地」

這可能是非常有用的爲我們所有的嗎？

有人挑戰？ :)

乾杯

實際上「infinityScroll」只讀取起2號外部文件，而只是提出我的想法更加清晰我使用序列一，二，三等等。

來源

2014-02-16 no0ne

所以你希望用戶向下滾動，但網頁仍然在頂部作爲最新的內容放在上面？對不起，但這不是很清楚我在ux – melc

看到更新的版本.. – no0ne

甚至在嘗試任何事情之前，你能確定你需要加載的最新頁面？ infinityScroll檢測到它是最後一頁，因爲它從調用下一頁獲得404，如果您不知道最後（最新）頁面是什麼，這將是一種不同的方法。 –

你可以把頁面頂部的更多按鈕，使一個event listener：

$('.selector').infinitescroll({ 
    loading: { 
     finished: function(){ 
     //move your newly-added content to the top using $.prepend() 
     } 
    } 
})

來源

2014-02-20 08:16:53 Capitaine

我猜你想這樣做，所以你得到的網址總是指向相同的內容（永久鏈接），whic h在某些情況下可以非常方便。例如，您知道文章foo位於第5頁，然後可以鏈接到page5.html#foo。

您可以通過將函數傳遞給path選項來實現此目的。但是，您必須事先知道頁面的數量，因爲這是我們用來計算路徑的。

// Amount of pages 
var numPages = 45; 

// Initialize infiniteScroll plugin 
$(selector).infinitescroll({ 
    path: function (page) { 
     // Concatenate the path to a page 
     var path = "page"; 
     // Only add a page number if page is below or equal numPages 
     if (page <= numPages) { 
      path += (numPages - page); 
     } 
     // Return path as "page%d.html" 
     return path + ".html"; 
    } 
});

如文檔中所述，路徑選項可以是URL的部分（例如["/page/", "/"]）或接受的頁號，並返回一個URL的功能的陣列。

來源

2014-02-24 07:53:01 mekwall

我在尋找的是：當管理員想要添加另一個頁面時，他只是再製作一個html文件並將其命名爲下一個相應的編號。然後這個HTML文件將是第一個外部HTML文件，以顯示在頁面頂部（或DIV），而不是最後的後向下滾動 – no0ne

只是爲了給它一個簡單的解釋，我想：「反向負載infinityScroll響應內容」 – no0ne

。如你所見，事先沒有辦法知道確切的頁面數量。但無論如何感謝:) – no0ne

我創建了一個樣本中的新元素（你需要添加）將在容器元素添加在上面。

HTML：

<div id="container" class="container"> 
</div>

CSS：

.container { 
    border: 1px solid #ccc; 
    height: 100px; 
    width:500px; 
    overflow:auto; 
}

JAVASCRIPT/JQUERY

// page count 
var count = 0; 
var content_to_add_on_top = '<div>Page {count}</div>'; 


// call this function in every 2 seconds 
setInterval(function() { 

    // code which you need to call when you wants to add an element to top in container 
    var content = content_to_add_on_top; 
    content = content.replace(/{count}/g, count); 
    var container = $('#container'); 
    var child_elements = container.children(); 
    if (child_elements.length === 0) { 
     // if child element does not exists 
     container.append(content); 
    } else { 
     // if child exists 
     var first_element = child_elements[0]; 
     $(first_element).prepend(content); 
    } 
    // increment count 
    count++; 
}, 2000);

JSFiddle Link

希望它能幫助。

來源

2014-02-25 04:52:28

反向加載infinityScroll響應內容

回答

相關問題