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）