[JQuery] InfiniteScroll 無限捲動介面 如 Facebook 動態牆

InfiniteScroll 是利用 jQuery 背後 ajax 方式, 將一頁一頁的網頁, 透過不換頁, 直接 append 到目前的頁面上, 達成向下捲動而看更多內容的功能. 像是 Facebook 動態牆, 就是這樣的應用情境.

官方網站: http://www.infinite-scroll.com


來看看怎麼做這個效果吧

先加入Jquery & InfiniteScroll
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.infinitescroll.min.js"></script>

InfiniteScroll 是利用了 jQuery 在背景取出下一頁的內容, 並將指定的 selector 資料 append 到目前的網頁上, JQuery程式碼如下:

<script type="text/javascript">
$(function(){   $('#container').infinitescroll({
    navSelector : 'div.nav', // selector for the paged navigation
    nextSelector : 'div.nav a', // selector for the NEXT link (to page 2)
    itemSelector : '.item', // selector for all items you'll retrieve
    loading: {
      img: 'Loading.gif', //圖片位置
      msgText: 'loading....', //讀取時顯示的文字
      finishedMsg: 'no more...' //結束讀取顯示文字
    }
  });
});
</script>


就是將本頁的容器, 利用 infinitescroll 函式呼叫, 並傳入 3個重要參數, 
navSelector (這個是指當 page 瀏覽到這個 selector 指定物件時, 進行 load 下一頁內容)
nextSelector (要 load 的內容, 就是 nextSelector 的物件中的 url)
itemSelector (則是 load 到網頁後, 要帶出來放到目前頁面上的內容項目)
以上面的例子來看, 網頁的介面會是如下:

<div id='container'> <div class='item'>
網頁內容
</div> </div>

而網頁最底端放入 (page-2.htm則是要append的頁面)
<div class='navigation'>
<a href='page-2.htm'></a>
</div>


完成後 當網頁移到最下面時，將會自動載入下一頁~~


有任何疑問歡迎留言

By 艾摩杰~