AJAX實作瀑布流觸發分頁與分頁觸發瀑布流的方法

所謂的瀑布流效果就正如輕圖床首頁效果那樣，多個內容相近的欄目緊密排列，盡量使到欄位間的間隙最小（即流體佈局），並且隨著頁面滾動條向下滾動，新的資料會追加至目前頁面的尾部直到所有資料載入完畢（滾動觸發的Ajax 翻頁）。

瀑布流觸發分頁

這裡說一下思路，雖然下面的實例中不能全都用到：
1.當進入螢幕時，判斷內容是否為空，如果不為空，開始初始化資料。
2.當往螢幕下拉時，判斷資料的最底部與螢幕高度+滾動的高度的大小。如果最底部小於上面兩者之和，重新請求接口，即載入資料。
3.當遇到資料超過某個頁數時，停止載入或以分頁的形式顯示，點選再顯示內容。

var intf_url="http://php.cn/intf";
var pathUrl = "http://php.cn/";
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(&#39;script&#39;);
 js.src = src;
 js.onreadystatechange = js.onload =function(){
 if(!js.readyState || js.readyState==&#39;loaded&#39;
  || js.readyState==&#39;complete&#39;){
  if(callback){callback()||callback};
 }
};
js.charset="utf-8";
document.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}
//回调函数
function fill(data){
if(data.pageCount==data.pageNo){
 is_more=false;//如果数据全部加载完毕，取消加载
    $("#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(); 
}

以上就是比較簡單的隨著下拉內容不斷載入的思路代碼。

JSON格式類似（如果是動態接口，可以透過callback函數，則這裡不用加fill()）：

fill({"fans":[{"nickname":"蔡宝坚","website":"php.cn","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20
});

原來靜態也可以做介面回呼。透過靜態處理，則大大緩解了伺服器壓力和加速生成內容，是大流量網站必備的處理方式。

jQuery的ajax方法實現分頁觸發瀑布流

1.透過 Ajax 的方式獲取下一頁的內容
我們需要網頁中具有如下 HTML 結構的導航， next_link 為下一頁的 url。

<div id="page_nav">
  <a href="next_link">下一页</a>
</div>

對應的 css

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

   

以下這段程式碼為透過 Ajax 的方式取得下一頁的內容，並追加到目前內容的結尾。

nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
  // 判断窗口的滚动条是否接近页面底部
  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.對追加的內容進行流體佈局
熟悉jQuery 的童鞋應該會了解js 對於透過Ajax 方式插入到頁面中的元素並不起作用，但在這裡並不需要作出如使用live () 等處理，因為Masonry 已經在內部作出類似的處理並且預設起效，因此只需在Ajax 成功執行後的回調函數中呼叫masonry() 方法即可。

$newElems = $result;
$newElems.imagesLoaded(function(){
  $container.masonry( 'appended', $newElems, true );
});

3.對Ajax 翻頁過程作出修飾
在上面的過程中已經有完整的瀑布流佈局，但是翻頁過程中並沒有任何提示，而且直接插入多張圖片可能會影響用戶體驗，因此需要對翻頁過程作出一些修飾，以下給出完整程式碼。
這裡需要增加一個如下的元素，用於提示正在加載新內容或提示已到了最後一頁。

<div id="page_loading">
  <span>给力加载中……</span>
</div>

對應的 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(){
  // 判断窗口的滚动条是否接近页面底部
  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);
          // 把新的内容设置为透明
          $newElems = result.css({ opacity: 0 });
          $newElems.imagesLoaded(function(){
            $container.masonry( 'appended', $newElems, true );
            // 渐显新的内容
            $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);
    }
  }
});

更多AJAX實現瀑布流觸發分頁與分頁觸發瀑布流的方法相關文章請關注PHP網網更多！