新浪微博網頁自動底部加載的效果很酷吧？其實這種叫做“無限滾動的翻頁技術”，當你頁面滑到列表底部時候無需點擊就自動加載更多的內容。
其實有很多jQuery的插件都已經實現了這個效果，我們來介紹幾個吧！
1、jQuery ScrollPagination
jQuery ScrollPagination plugin 是一個jQuery 實現的支持無限滾動加載數據的插件。
地址：http://andersonferminiano.com/jqueryscrollpagination/
他的demo下載：http://andersonferminiano.com/jqueryscrollpagination/jqueryscrollpagination.zip
實例代碼：
- $(function(){
- $('#content').scrollPagination({
- 'contentPage': 'democontent.html', // the url you are fetching the results
- 'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
- 'scrollTarget': $(window), // who gonna scroll? in this example, the full window
- 'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
- 'beforeLoad': function(){ // before load function, you can display a preloader div
- $('#loading').fadeIn();
- },
- 'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
- $('#loading').fadeOut();
- var i = 0;
- $(elementsLoaded).fadeInWithDelay();
- if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
- $('#nomoreresults').fadeIn();
- $('#content').stopScrollPagination();
- }
- }
- });
- // code for fade in element by element
- $.fn.fadeInWithDelay = function(){
- var delay = 0;
- return this.each(function(){
- $(this).delay(delay).animate({opacity:1}, 200);
- delay += 100;
- });
- };
- });
2、 jQuery Screw
Screw (scroll + view) 是一個 jQuery 插件當用戶滾動頁面的時候加載內容，是一個無限滾動翻頁的插件。
官方地址：https://github.com/jasonlau/jQuery-Screw
3. AutoBrowse jQuery Plugin
Autobrowse jQuery Plugin 插件在用戶滾動頁面的時候自動通過 Ajax 加載更多內容，使用瀏覽器內置緩存。
官方地址：https://github.com/msjolund/jquery-esn-autobrowse
