<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<style>
.out{position: relative; margin: 0 auto;}
.in{ float:left;}
img{ margin:10px; padding:10px; border:1px solid lightgray; border-radius:15px; box-shadow:0px 0px 5px #F63;}
</style>
</head>
<body>
<div class="out"></div>
<script>
//模拟获取到的数据
var arrData=['images/i1.jpg','images/i2.jpg','images/i3.jpg','images/i4.jpg','images/i5.jpg','images/i6.jpg','images/i7.jpg','images/i8.jpg','images/i9.jpg','images/i10.jpg','images/i11.jpg','images/i12.jpg','images/i13.jpg','images/i14.jpg','images/i15.jpg'];
//准备页面的元素
var outDiv = document.querySelector('.out');
//数据准备完毕后，将数据加载页面
for(var i=0; i<arrData.length; i++){
var div =document.createElement('div');
div.className = 'in';
div.innerHTML ='<img src="'+arrData[i]+'">';
outDiv.appendChild(div);
}
//页面加载完毕后，构建瀑布流的结构
window.onload =function(){
var inDivs =document.querySelectorAll('.in');
var num = Math.floor(document.documentElement.clientWidth/inDivs[0].offsetWidth);
outDiv.style.width =num*inDivs[0].offsetWidth+'px';
var heightArr =[] //储存第一行的高度
//所有的div中，只有第一行不用定位
for(var i=0;i<inDivs.length;i++){
if(i<num){
//第一行
heightArr.push(inDivs[i].offsetHeight);
}else{
//其余行
inDivs[i].style.position ='absolute';
minHeight = Math.min.apply(null,heightArr);
minIndex = heightArr.indexOf(minHeight);
//开启定位
inDivs[i].style.top =minHeight+'px';
inDivs[i].style.left=inDivs[minIndex].offsetLeft+'px';
//将高度进行累加
heightArr[minIndex] +=inDivs[i].offsetHeight;
}
}
}
</script>
</body>
</html>
