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

來源:互聯網
上載者:User

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

瀑布流觸發分頁

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

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);}//回呼函數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":"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分鐘前"},{"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);    }  }});

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.