使用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.onload=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.mi
4000
n.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;
}
}
}