jQuery-瀑布流-絕對定位布局（二）(延遲AJAX加載圖片)

瀑布流-絕對定位布局，與浮動布局的區別在於

1.布局不一樣：

　　絕對定位：一個UL里面放置所有的絕對定位的LI；

　　浮動布局：多個（一般三四個）UL分布放置LI；

2.AJAX不一樣

　　絕對定位：只需要將請求來的JSON數據（當然可以是別的格式的數據），插入到UL就可以了。然后再對這個新插入的LI進行TOP和LEFT設置；

　　浮動布置：是將請求來的JSON數據（當然可以是別的格式的數據），分別插入到對應的UL當中，因為有絕對定位，所以不用對LI設置位置。會自動向下排列；

 

一、功能分析：

　　1.定位每一個LI，即設置每一個LI的TOP和LEFT值；

　　2.將AJAX的數據，放在LI中，插入到UL當中；

 

二、實現過程：

　　1.設置LI的LEFT；

　　　　在那一列？有了列數再乘以每個LI的寬度，就可以確定LEFT值

　　　　找規律：

　　　　現在我需要三列，那么每一列當中的LI，都有一個共同的列號（自己設置0.1.2或者A.B.C，總之自己對這三列給一個標識）這里設為

　　　　0號第一列

　　　　1號第二列

　　　　2號第三列

　　　　所以每一行，只能放三個LI

　　　　第一個li  在 0號   第二個li 在 1號  第三個li 在 2號

　　　　第四個li  在 0號   第五個li 在 1號  第六個li 在 2號

　　　　所以想到用索引取模,正好可以得出0 1 2 ，0 1 2 ……

　　　　通過這個我們就可以判斷LI在那一列；

　　　　index%3 = 0 1 2 ，0 1 2 ……

　　　　為什么要模3,因為要得出三個數的循環。所以以后要想得出這樣的循環，都可以考慮取模運算；

　　2.設置TOP的值；

　　　　因為每一列的總高度值都是不一樣的。所以我們要設三個變量來存放不同列的高度值。

　　　　為什么要取得這個值？

　　　　1.初次加載的時候LI，的TOP值，是根據當前列高度值來設置的；

           2.因為AJAX請求后的數據LI要插入到UL當中，必需知道當前列現在的總高度，然后給新的LI為它的TOP值；

其實中間有很多可以說的。但實在是太長了。我代碼中注釋也寫的很清楚了。有問題可以留言和我交流。！！

要提一點的就是，里面有很多相同的功能，我都寫到一個FUNCTION當中，方便調用。例如要設LI的TOP和LEFT，要獲取LI的列數，要設置列的總高度。這都是共公的，也是功能塊，所以還是單獨用函數寫出來好；

(function($){
    $.fn.extend({
        waterfall:function(value){
            value=$.extend({
                jsonUrl:"",
                dataType:"",
                cloum:"",
                liWidth:""
            },value)
            
            //引用包函布瀑布流的DIV對象
             var $this = $(this);
             
             //存放列的充號
             var colmLeftIndex = 0;
             
             //用來存放每一列的高度值；
             var liHeight_0 = 0;
             var liHeight_1 = 0;
             var liHeight_2 = 0;
             
             
             
             //設置列的序號
             function getcolums(col){
                colmLeftIndex = col%value.cloum;
             }
            
             //設置當前列的高度
            function getLiHeight(colIndex,hei){
                     switch(colIndex){
                         case 0:
                         liHeight_0 += hei
                         break;
                         case 1:
                         liHeight_1 += hei;
                         break;
                         case 2:
                         liHeight_2 += hei;
                         break;
                    }    
            }
            
            //設置每一個LI的TOP和LEFT
            function setLiOffset(oli,liH){
                switch(colmLeftIndex){
                        case 0 :
                            oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_0});
                            getLiHeight(colmLeftIndex,liH);
                            console.log(liHeight_0);
                            
                        break;
                        case 1:
                            oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_1});    
                            getLiHeight(colmLeftIndex,liH);
                        break;
                        
                        case 2:
                            oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_2});    
                            getLiHeight(colmLeftIndex,liH);
                        break;
                 }                
            }
            
            
            //初次加載時，遍歷所有的LI，並定位每一個LI的TOP和LEFT值
            $this.find("li").each(function(index, element){
                //當前LI的引用
                 var $liThis = $(this);
                 //獲得當前LI的高度值
                 var liH = $liThis.outerHeight();
                 
                 //獲得當前列的序號
                 getcolums(index);
                 
                 //把當前LI的高度值存到相應的列的總高度變量中
                 setLiOffset($liThis,liH)
                 
                         
            });
                            
            //判斷每個UL的最后一個LI，是否進入可視區域
            function see(objLiLast){
                    //瀏覽器可視區域的高度
                    var see = document.documentElement.clientHeight;    
                    //滾動條滑動的距離
                    var winScroll = $(this).scrollTop();
                    //每個UL的最后一個LI，距離瀏覽器頂部的
                    var lastLisee = objLiLast.offset().top
                    return lastLisee < (see+winScroll)?true:false;        
            }
            //是否發出AJAX的“開關”；
            var onOff = true;
            
            $(window).scroll(function(){
                //拖動滾條時，是否發送AJAX的一個“開關”
                $this.children("ul").each(function(index, element) {
                    
                    //引用當前的UL
                    var ulThis = this;
                    //引用最后一個LI
                    var lastLi = $("li:last",ulThis);
                    //調用是否進入可視區域函數
                    var isSee = see(lastLi);
                    
                    if(isSee && onOff){
                        onOff = false;
                        //發送AJAX請求，載入新的圖片
                        $.ajax({
                            url:value.jsonUrl,
                            dataType:value.dataType,
                            success:function(data){
                                //對返回JSON里面的list數據遍歷
                                $.each(data.list,function(keyList,ovalue){
                                //對LIST里面的SRC數組遍歷,取到圖片路徑
                                $.each(ovalue,function(keySrc,avalue){
                                    $.each(avalue,function(keysrc1,value1){
                                        var $imgLi = $("<li><a href=''><img src='" + value1 + "' alt='' /><p>11111</p></a></li>")
                                        //這里開始和浮動布局不一樣了。其它部分在調用AJAX的時候，是一樣的；因為這里不需要指定插入到那個UL；
                                        $this.children("ul").append($imgLi);
                                        
                                        //獲取這個新插入到頁面中的LI的列的序號
                                        var _liindex = $imgLi.index();
                                        getcolums(_liindex);
                                        
                                        //獲取這個新插入到頁面中的LI的高度值
                                        
                                        var _nlih = $imgLi.outerHeight();
                                        
                                        //設置當前LI的TOP和LEFT
                                        setLiOffset($imgLi,_nlih);
                                        
                                    })    
                                })
                                onOff = true;
                                })
                            }    
                        })
                    }
                });    
            })
        }    
    })    
})(jQuery)

 

DEMO下載  （這個要在本地機器上安裝服務器平台。我用的是PHP套裝APPSERV，里面的是APACHE）