非同步載入技術實現瀑布流效果，非同步載入技術瀑布_PHP教程

非同步載入技術實現瀑布流效果，非同步載入技術瀑布

非同步載入技術實現瀑布流效果。當捲軸到最底部的時候觸發一個事件，這個事件寫入$.get()事件，向內部程式頁傳遞類別id和頁碼，程式將會返回那個類別下的相對頁的產品列表，如果程式查詢當前類無產品即返回空。

捲軸事件要寫在window.onscroll中才有效判斷。如下：

window.onscroll=function(){
　　　　       // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;        var tops =    $(document).scrollTop(); //擷取捲軸的位置        var sctop = $(document).height()-$(window).height();        var id = $("#ajax_claid").val();        if(!id){             id=8;        }        $("#ajax_p").val(tops);        if(tops>=sctop)//成立說明捲軸已在最底部        {            var b=$("#ajax_p").val();            if(b>a){                page=page+1;//傳遞頁碼            }            var Url = "aja_pro/"+id+"/"+page;//程式頁面，查詢資訊返回資料，直接返回帶html的資訊。                    $.get(Url,function(data){                $("#aja_jia").append(data);            });                    }    };

　　

我的html頁面過長，怎實作類別似瀑布流效果？就是當瀏覽到底部時載入剩餘部分內容？

①資料分成兩部分，剩餘部分放在一個JSON裡，資料少的話可以放在js代碼裡。
②實現4列布局，建立幾個ul作為頁面起初的資料顯示。
③通過判斷最後一個li距離瀏覽器視窗的距離，觸發函數將JSON中的資料以ul的形式遍曆添加到頁面中。
 

怎實現頁面的非同步載入?

說白了就是無重新整理技術
jquery內庫已經封裝了ajax的效果 我們可以直接拿來用，.ajax .post .get .load
比如說一個點擊方法