使用JavaScript实现简单的瀑布流

效果截图

基本思路

每行展示固定数目的图片（假设为5），第一行从左至右依次展示5张图片，第6张放在前5张中高度最小的那张下方，第7张放在前6张中整体高度最小的那张下方，第8张放在前7张中整体高度最小的那张下方.......

整体高度：每一列的所有图片高度之和 以及padding、margin、border（如果有的话）之和

代码部分

HTML

<div id="main">
    <div class="box">
        <div class="pic">
            <img src="../images/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../images/1.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="../images/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../images/1.jpg">
        </div>
    </div>
</div>

CSS

#main{
    position: relative;
}
.box{
    padding-left:15px;
    padding-top:15px;
    float:left;
}
.pic{
    padding:8px;
    border:1px solid #dcdcdc;
    border-radius:3px;
    box-shadow:0 0 5px #ccc;
}

.pic img{
    width:230px;
	height:auto;
}

JavaScript

window.οnlοad=function(){
   waterfall();
}

 function waterfall() {
    var box = document.getElementsByClassName("box");
    var boxWidth = box[0].offsetWidth; // 图片本身宽度 与 各种 padding margin border 的和
    var cols = 5;// 每行放5张图片
    var boxHeight = [];
	
    for (var i = 0; i < box.length; i++) {
        if (i < cols) {
            boxHeight.push(box[i].offsetHeight)
        } else {           
            var minHeight = Math.min.apply(null, boxHeight);//得到最小高度          
            var minHeightIndex = getminHeightIndex(boxHeight, minHeight); // 得到第一行高度最小的图片的位置		
            box[i].style.position = 'absolute';
            box[i].style.top = minHeight + 'px';
            box[i].style.left = boxWidth * minHeightIndex + 'px';
            boxHeight[minHeightIndex] = box[i].offsetHeight + boxHeight[minHeightIndex]			
        }
    }
}

function getminHeightIndex(boxHeight, minHeight) {
    for (var i = 0; i < boxHeight.length; i++) {
        if (boxHeight[i] == minHeight) {
            return i;
        }
    }
}