所謂的瀑布流效果就正如輕圖床首頁效果那樣，多個(gè)內(nèi)容相近的欄目緊密排列，盡量使到欄目間的間隙最?。戳黧w布局），并且隨著頁面滾動(dòng)條向下滾動(dòng)，新的數(shù)據(jù)會(huì)追加至當(dāng)前頁面的尾部直到所有數(shù)據(jù)加載完畢（滾動(dòng)觸發(fā)的 Ajax 翻頁）。

瀑布流觸發(fā)分頁

這里說一下思路，雖然下面的實(shí)例中不能全都用到：

1.當(dāng)進(jìn)入屏幕時(shí)，判斷內(nèi)容是否為空，如果不為空，開始初始化數(shù)據(jù)。

2.當(dāng)往屏幕下拉時(shí)，判斷數(shù)據(jù)的最底部與屏幕高度+滾動(dòng)的高度的大小。如果最底部小于上面兩者之和，重新請求接口，即加載數(shù)據(jù)。

3.當(dāng)遇到數(shù)據(jù)超過某個(gè)頁數(shù)時(shí)，停止加載或者用分頁的形式顯示，點(diǎn)擊再顯示內(nèi)容。

var intf_url="http://jb51.net/intf";

var pathUrl = "http://jb51.net/";

var page=1;

var isLoadRB=false; 

var ul_select=$("#fansList");

var btn_more=$("#loading");

if(ul_select.length <1) return ;

var is_more =true;

//跨域請求接口

function loadjs(src,callback){

 var js= document.createElement('script');

 js.src = src;

 js.onreadystatechange = js.onload =function(){

 if(!js.readyState || js.readyState=='loaded'

  || js.readyState=='complete'){

  if(callback){callback()||callback};

 }

};

js.charset="utf-8";

document.getElementsByTagName('head')[0].appendChild(js);

}

//回調(diào)函數(shù)

function fill(data){

if(data.pageCount==data.pageNo){

 is_more=false;//如果數(shù)據(jù)全部加載完畢，取消加載

    $("#loading").html("加載完畢");

}

}

//解析接口

function queryIntf(){

var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";

loadJs(url,callback);

}

function callback(){

page++;

}

/*判斷是否要加載接口*/

function needtoloadRB(){

 var btn_top=btn_more.offset().top;

 var window_height=$(window).height();

 var scroll_Top=$(window).scrollTop();

 return btn_top<scroll_Top+window_height?true:false;

}

$(window).scroll(function(){

 var _needload=needtoloadRB();

 if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();}

})

window.onload = function(){

 queryintf(); 

}

以上就是比較簡單的隨著下拉內(nèi)容不斷加載的思路代碼。

JSON格式類似于（如果是動(dòng)態(tài)接口，可以通過callback函數(shù)，則這里不用加fill()）：

fill({"fans":[{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20

});

原來靜態(tài)也可以做接口回調(diào)。通過靜態(tài)處理，則大大緩解了服務(wù)器壓力和加速生成內(nèi)容，是大流量網(wǎng)站必備的處理方式。

jQuery的ajax方法實(shí)現(xiàn)分頁觸發(fā)瀑布流

1.通過 Ajax 的方式獲取下一頁的內(nèi)容

我們需要網(wǎng)頁中具有如下 HTML 結(jié)構(gòu)的導(dǎo)航， next_link 為下一頁的 url。

<div id="page_nav">

  <a href="next_link">下一頁</a>

</div>

相應(yīng)的 css

#page_nav {clear: both; text-align: center; }

以下這段代碼為通過 Ajax 的方式獲取下一頁的內(nèi)容，并追加到當(dāng)前內(nèi)容的末尾。

nextHref = $("#next_page a").attr("href");

// 給瀏覽器窗口綁定 scroll 事件

$(window).bind("scroll",function(){

  // 判斷窗口的滾動(dòng)條是否接近頁面底部

  if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {

    // 判斷下一頁鏈接是否為空

    if( nextHref != undefined ) {

      // Ajax 翻頁

      $.ajax( {

        url: $("#page_nav a").attr("href"),

        type: "POST",

        success: function(data) {

          result = $(data).find("#thumbs .imgbox");

          nextHref = $(data).find("#page_nav a").attr("href");

          $("#page_nav a").attr("href", nextHref);

          $("#thumbs").append(result);

        }

      });

    } else {

      $("#page_nav").remove();

    }

  }

});

2.對追加的內(nèi)容進(jìn)行流體布局

熟悉 jQuery 的童鞋應(yīng)該會(huì)了解 js 對于通過 Ajax 方式插入到頁面中的元素并不起作用，但在這里并不需要作出如使用 live() 等處理，因?yàn)?Masonry 已經(jīng)在內(nèi)部作出類似的處理并且默認(rèn)起效，因此只需在 Ajax 成功執(zhí)行后的回調(diào)函數(shù)中調(diào)用 masonry() 方法即可。

$newElems = $result;

$newElems.imagesLoaded(function(){

  $container.masonry( 'appended', $newElems, true );

});

3.對 Ajax 翻頁過程作出修飾

在上面的過程中已經(jīng)有完整的瀑布流布局，但是翻頁過程中并沒有任何提示，而且直接插入多張圖片可能會(huì)影響用戶體驗(yàn)，因此需要對翻頁過程作出一些修飾，下面給出完整代碼。

這里需要增加一個(gè)如下的元素，用于提示正在加載新內(nèi)容或提示已到了最后一頁。

<div id="page_loading">

  <span>給力加載中……</span>

</div>

相應(yīng)的 css

代碼如下:

#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px;  padding: 10px; position: absolute; bottom: -50px; left: 330px; }

下面是完整的 Ajax 翻頁代碼

nextHref = $("#next_page a").attr("href");

// 給瀏覽器窗口綁定 scroll 事件

$(window).bind("scroll",function(){

  // 判斷窗口的滾動(dòng)條是否接近頁面底部

  if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {

    // 判斷下一頁鏈接是否為空

    if( nextHref != undefined ) {

      // 顯示正在加載模塊

      $("#page_loading").show("slow");

      // Ajax 翻頁

      $.ajax( {

        url: $("#page_nav a").attr("href"),

        type: "POST",

        success: function(data) {

          result = $(data).find("#thumbs .imgbox");

          nextHref = $(data).find("#page_nav a").attr("href");

          $("#page_nav a").attr("href", nextHref);

          $("#thumbs").append(result);

          // 把新的內(nèi)容設(shè)置為透明

          $newElems = result.css({ opacity: 0 });

          $newElems.imagesLoaded(function(){

            $container.masonry( 'appended', $newElems, true );

            // 漸顯新的內(nèi)容

            $newElems.animate({ opacity: 1 });

            // 隱藏正在加載模塊

            $("#page_loading").hide("slow");              

          });

        }

      });

    } else {

      $("#page_loading span").text("木有了噢，最后一頁了！");

      $("#page_loading").show("fast");

      setTimeout("$('#page_loading').hide()",1000);

      setTimeout("$('#page_loading').remove()",1100);

    }

  }

});