瀑布流
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
#main{ position:relative; margin:0 auto;}
.pin{ padding:15px 0 0 15px; float:left;}
.box{ padding:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 5px #ccc; }
.box img{ width:162px; height:auto;}
</style>
<script>
window.onload=function(){
show('main','pin');
//模拟后台数据
var dataInt={'data':[{'src':'0.jpg'},{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'}]};
window.onscroll=function(){
if(check){
var op = document.getElementById('main'); //父盒子
//将数据渲染到页面底部
for(var i=0;i<dataInt.data.length; i++){
//创建divA
var divA = document.createElement('div');
divA.className = 'pin';
op.appendChild(divA);
//创建divB
var divB = document.createElement('div');
divB.className = 'box';
divA.appendChild(divB);
//创建IMG
var oimg = document.createElement('img');
oimg.src = 'images/'+dataInt.data[i].src;
divB.appendChild(oimg);
}
show('main','pin');
}
};
}
function show(parent,box){
var op = document.getElementById(parent); //父盒子
var clas = getByClass(op,'pin'); //返回class 数组
var obox = clas[0].offsetWidth; //获取一个盒子的宽度
var cols = Math.floor((document.documentElement.clientWidth||document.body.clientWidth)/obox);
var boxHeight = []; //第一排图片高度 的数组
op.style.cssText = 'width:'+obox*cols+'px'; //设置 op 宽度；
for(var j=0; j<clas.length; j++){
if(j<cols){ //判断的第一排图片
boxHeight.push(clas[j].offsetHeight); //将高度放在数组
}else{
var minH = Math.min.apply(null,boxHeight); //获取boxHeight数组中最小的值
var index = geiminIndex(boxHeight,minH); //获取boxHeight最小值的索引
clas[j].style.position = 'absolute';
clas[j].style.top = minH + 'px';
clas[j].style.left = clas[index].offsetLeft +'px';
boxHeight[index] += clas[j].offsetHeight; //
}
}
//alert(op.offsetWidth);
//console.log(boxHeight)
//console.log(minH)
}
function geiminIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
};
function getByClass(parent,cla){
var els = [];
var tots = parent.getElementsByTagName('*');
for(var i=0; i<tots.length; i++){
if(tots[i].className==cla){
els.push(tots[i]);
}
}
return els;
};
//加载图片的条件
function check(){
var op = document.getElementById('main'); //父盒子
var clas = getByClass(op,'pin'); //返回class 数组
//页面最后的一个盒子，距离顶部的距离
var last = clas[clas.length-1].offsetTop+Math.floor(clas[clas.length-1].offsetHeight/2);
//滚动距离加窗口的高度
var scrollTop = (document.documentElement.clientHeight || document.body.clientHeight) + (document.documentElement.scrollTop || document.body.scrollTop)
return last < scrollTop ? true : false;
}
</script>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="./images/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/3.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/5.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/6.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/7.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/8.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/9.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/10.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/11.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/12.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/13.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/14.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/15.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/16.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/17.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/18.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/19.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg"/>
</div>
</div>
</div>
</body>
</html>
javascript方法：原生js实现方法 存在bug
