使用js实现瀑布流

//样式

*{
padding: 0;
margin: 0;
}
#main {
position: relative;
}
.box {
padding: 15px 0 0 15px;
float: left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 5px;
border-radius: 5px;
}
.pic img {
192px;
height: auto;
}

//结构部分

<div id="main">
<div class="box">
<div class="pic">
<img src="p_00.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_01.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_02.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_03.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_04.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="p_05.jpg" />
</div>
</div>

<div>

//交互部分

window.onload = function() {
waterfall("main","box");
var dataInt = {"data": [{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]};
window.onscroll = function(){
if(checkScrollSlide){
var oParent = document.getElementById("main");
//将数据块渲染到页面尾部
for(var i=0;i<dataInt.data.length;i++){
var oBox = document.createElement("div");
oBox.className = "box";
oParent.appendChild(oBox);
var oPic = document.createElement("div");
oPic.className = "pic";
oBox.appendChild(oPic);
var oImg = document.createElement("img");
oImg.src = dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall("main","box"); // 设置新添加图片的位置
}
};
};

function waterfall(parent,box){
//取main下所有class为box的元素
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent,box);
//计算页面显示的列数（页面的宽度/box的宽度）
var oBoxW = oBoxs[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//设置main的宽度
oParent.style.cssText = "" + oBoxW*cols + "px; margin: 0 auto";
var hArr = []; // 存放每一列高度的数组
for(var i=0; i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else {
var minH = Math.min.apply(null, hArr);
var index = getMinhIndex(hArr, minH);
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH + "px";
//oBoxs[i].style.left=oBoxW * index + "px";
oBoxs[i].style.left=oBoxs[index].offsetLeft + "px";
hArr[index] += oBoxs[i].offsetHeight;
}
}
}

//根据class获取元素
function getByClass(parent, clsName){
var boxArr = []; //存储所又获取到的class为box的元素
var oElements = parent.getElementsByTagName('*');
for(var i =0;i<oElements.length;i++){
if(oElements[i].className == clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}

function getMinhIndex (arr, val){
for(var i in arr){
if(arr[i] == val){
return i;
}
}
}

//检测是否具备了滚动条加载数据块的条件
function checkScrollSlide () {
var oParent = document.getElementById("main");
var oBoxs = getByClass(oParent, "box");
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.body.clientHeight || document.documentElement.clientHeight;
return (lastBoxH > scrollTop+height) ? true : false;
}