使用JQuery和CSS3兩種方法實現瀑布流布局

標籤：

JQ實現瀑布流圖片定位
1、jQuery是繼prototype之後又一個優秀的Javascript架構

2、$(window).width() 瀏覽器視窗的寬度
outerWidth() = padding+border+width;
width() = width
/*在jQuery中，width()方法用於獲得元素寬度；innerWidth()方法用於獲得包括內邊界（padding）的元素寬 度，outerWidth()方法用於獲得包括內邊界(padding)和邊框(border)的元素寬度，如果outerWidth()方法的參數為 true則外邊界(margin)也會被包括進來，即獲得包括外邊框(margin)、內邊界(padding)和邊框(border)的元素寬度。同 理，innerHeight方法與outerHeight方法也是用同樣的方法計算相應的高度。
所以說：對於同一個元素應該是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);*/

3、$.inArray(所找元素,數組) 該方法用於擷取元素的索引

4.jQuery遍曆的函數
each $boxs.each(function(index,value){
}); index 索引值，value對應的值
5.eq(n),從結果集中選取第n的元素

6.$.inArray(value,arr)工具函數，用來判斷某個值在數組中的索引

7.each遍曆的value是DOM對象。將value DOM對象轉換為jQuery對象才能使用其方法 ：$(value)
jQuery的$.inArray()方法直接可以得到一個數在數組中的索引
$(dom) 將Dom對象轉換成jQuery對象

$(window).on("load",function(){
    waterfall();
})
function waterfall(){
    var $boxs=$("#main>div");
    var w=$boxs.eq(0).outerWidth();
    var cols=Math.floor($(window).width()/w);
    $("#main").width(w*cols).css("margin","0 auto");
    var hArr=[];
    $boxs.each(function(index,value){
        var h=$boxs.eq(index).outerHeight();
        if(index<cols){
            hArr[index]=h;
        }else{
            var minH=Math.min.apply(null,hArr);
            var minHIndex=$.inArray(minH,hArr);
            $(value).css({
                "position":"absolute",
                "top":minH+"px",
                "left":minHIndex*w+"px"
            })
            hArr[minHIndex]+=$boxs.eq(index).outerHeight();
        }
    })
}

【原理】css3多欄布局column
【知識點】
①column的瀏覽器安全色問題，不同核心要寫其首碼
-webkit Google瀏覽器核心
-ms IE
-o 歐朋opera
-moz FirefoxFireFox
②column-width 和column-count沒有必要同時出現
③column-rule設定列與列之間的邊框
④column-gap 設定列間距，不一定定義多少，實際就顯示多少。其計算規則：用當前瀏覽器寬口寬除以定義的列寬，剩下的距離平均分配

【css3和js實現方法比較】
--css3方式--
1：不需要計算，瀏覽器自動計算，只需設定1列寬，效能高
2:列寬隨著瀏覽器寬口大小進行改變，使用者體驗不好；
3：圖片排序按照垂直順序排列，打亂圖片顯示順序
4.圖片載入還是需要js
--js方式--
js實現的瀑布流不會有上面的缺點，但是效能相對要差！

/*alert($(window).height()); //瀏覽器時下視窗可視地區高度
alert($(document).height()); //瀏覽器時下視窗文檔的高度
alert($(document.body).height());//瀏覽器時下視窗文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器時下視窗文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器時下視窗可視地區寬度
alert($(document).width());//瀏覽器時下視窗文檔對於象寬度
alert($(document.body).width());//瀏覽器時下視窗文檔body的高度
alert($(document.body).outerWidth(true));//瀏覽器時下視窗文檔body的總寬度 包括border padding margin

alert($(document).scrollTop()); //擷取捲軸到頂部的垂直高度
alert($(document).scrollLeft()); //擷取捲軸到左邊的垂直寬度*/

使用JQuery和CSS3兩種方法實現瀑布流布局