jquery瀑布流的製作

首先，還是來看一下炫酷的頁面：

今天就邊做邊說了：

一。準備工作

新建css，js，img文件夾存放相應文件，併在demo.html文件中引入外部文件（註意要把jquery文件引入），這裡就不過多描述了。

二。圖片展示

<div id="main">
    <div class="pic">
        <img src="img/1.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/2.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/3.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/4.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/5.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/6.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/7.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/8.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/9.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/10.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/1.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/2.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/3.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/4.jpg" />
    </div>
     <div class="pic">
        <img src="img/5.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/6.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/7.jpg" />
    </div>
</div>

一個大div包裹全局，小的div包裹圖片，這裡為什麼要這麼多圖片呢，是因為剛開始的時候圖片要占滿屏幕，否則會不美觀。而且jq中用的是監聽滾動條的方法載入圖片，圖片太少的話滾動條都不會出現，自然不能執行滾動條的事件。

分析一下圖片的顯示效果：

1.圖片有白色的邊框，陰影

2.圖片是平鋪的

*{
    padding:0;
    margin:0;
}
#main{
    position:relative;
}
#main .pic{
    width:170px;
    box-shadow: 0 0 6px #CCCCCC;
    float:left;
    margin:5px;
}
#main .pic img{
    width:160px;
    height:auto;
    border: 5px #FFFFFF solid;
}

相信上面的代碼是很好理解的，到此為止圖片已經平鋪了。

三。讓圖片順序依次排列

雖然執行完上面的代碼以後圖片是平鋪了，但效果卻是很不好的，它沒有像圖片展示的那樣高低排列。

如何實現高低排列：

1.第一行肯定是沒有問題的，因為第一行的每張圖上面沒有圖片，也就是說是平的；

2.第二行就可以取第一行中高度最小的圖片，然後把第二行的第一張圖片放在下麵（這裡用絕對定位控製圖片位置）；

3.以此類推，把第二行第一張圖片插入以後，在選擇這時候第一行中最短的，並把圖片放在下麵。

function waterFall(){
    var divWidth = $("#main .pic").eq(0).width()+10; //獲取頁面中包裹圖片的div寬度，這裡的+10是因為在css中設置的margin是5px,左右加起來就是10（相當於這個div的實際寬度比預設多10px）
    var num = Math.floor($(window).width()/divWidth); // Math.floor是向下取整，獲取整個瀏覽器的寬度除以"圖片的占寬"可以獲得圖片可以排放多少列，這也就是向下取整的原因了
    
    $("#main").css({  //設置整個div的寬度，並讓其居中顯示
        "width":divWidth*num,
        "margin": "0 auto"    
    });
    var picArr = []; //定義一個數組
    $("#main .pic").each(function(index){ //遍歷所有.pic的div
        var picHeight = $("#main .pic").eq(index).height();//獲取每個div的高度
        if(index<num){ //如果是第一行
            picArr[index] = picHeight;//把高度存儲進數組
        }else{ //如果數組不是第一行的數據了
            var minH = Math.min.apply(null,picArr); //獲取數組中最小的高度
            var minIndex = $.inArray(minH,picArr); //獲取最小高度的index（位置）
            $(this).css({ //設置這個div的位置
                "position":"absolute",
                "top":minH+10, //設置它距離上方的距離，這裡加10是因為在css中設置的margin是5px,上下加起來是10px
                "left":$("#main .pic").eq(minIndex).position().left     //獲取最小高度距離左邊的距離
            });
            picArr[minIndex]+=$("#main .pic").eq(index).height()+10; //把最小的高度存入數組中
        }
    });
}

在頁面載入完後執行waterFall()方法，這個句子就不寫啦。到此為止就可以看到圖片依次有序排列啦

四。瀑布流的實現

思路：這裡是監聽瀏覽器的滾動條，當滾動條到達底部時就載入預定數組中的圖片

$(window).on("load",function(){
    waterFall();
    var pics = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
    window.onscroll = function(){
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            $.each(pics,function(index,value){
                $(".pic").eq(0).clone().appendTo("#main").find("img").attr("src","img/"+value);    
            });
            waterFall();
        }
    }
});

appendTo() 方法在被選元素的結尾（仍然在內部）插入指定內容。

當然這裡是當瀏覽器的滾動條到達底部的時候才會載入圖片，如果覺得這樣用戶體驗不好的話，可以在if裡面設置，例如：if ($(document).scrollTop()+100 >= $(document).height() - $(window).height())