<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{margin: 0 auto;width: 1140px;position: relative;}
.div1{padding: 8px;position: absolute;}
.div2{width: 200px;padding: 5px;border: 1px solid #999;}
.img{width: 200px;display: block;}
</style>
<script type="text/javascript">
/*实现原理：通过position绝对定位的方式，判断哪一列当前高度最小，
然后把下一张图片定位到那一列下面。
*/
window.onload=function (){
var oBox=document.getElementById('box');
var aDiv1=[];
var flag=true;//用来判断是否可以加载数据
/*实际项目中从后台导入数据，这里为演示，用json假数据块*/
var json={
'data':[
{'src':'img/1.jpg'},{'src':'img/2.jpg'},{'src':'img/3.jpg'},
{'src':'img/4.jpg'},{'src':'img/5.jpg'},{'src':'img/6.jpg'},
{'src':'img/7.jpg'},{'src':'img/8.jpg'},{'src':'img/9.jpg'},
{'src':'img/10.jpg'},{'src':'img/11.jpg'},{'src':'img/12.jpg'}
],
'imgH':[
{'height':'232px'},{'height':'264px'},{'height':'300px'},
{'height':'289px'},{'height':'267px'},{'height':'278px'},
{'height':'300px'},{'height':'234px'},{'height':'271px'},
{'height':'251px'},{'height':'363px'},{'height':'333px'}
]
}
function getCont(){
/*创建节点。加载数据*/
/*在box中插入下面所示节点,
div1设置padding的right,top的值，让每一列之间有空隙。
<div class="div1">
<div class="div2">
<img src=""/>
</div>
</div>
*/
for (var i=0;i<json.data.length;i++) {
var oDiv1=document.createElement('div');
oDiv1.className='div1';
var oDiv2=document.createElement('div');
oDiv2.className='div2';
oDiv1.appendChild(oDiv2);
var oImg=document.createElement('img');
oImg.className='img';
oImg.src=json.data[i].src;
oImg.style.height=json.imgH[i].height;
oDiv2.appendChild(oImg);
oBox.appendChild(oDiv1);
/*把创建的div1节点放到数组里*/
aDiv1.push(oDiv1);
}
var arrH=[];
for (var i=0;i<aDiv1.length;i++) {
if(i<5){
/*把前面5个div1从左到右排列，并把它的高度放进数组arrH*/
arrH.push(aDiv1[i].offsetHeight);
aDiv1[i].style.left=aDiv1[0].offsetWidth*i+'px';
}else{
/*else从第六个开始，获取到数组arrH中的最小值及其索引，
left值为一个div1的宽度乘以索引，top为数组中最小的那个数，
然后数组中最小的数加上新的div1的高度，然后继续循环
*/
var minH=Math.min.apply(null,arrH);
for (var j=0;j<arrH.length;j++) {
if(arrH[j]==minH){
var index=j;
}
}
aDiv1[i].style.left=aDiv1[0].offsetWidth*index+'px';
aDiv1[i].style.top=minH+'px';
arrH[index]+=aDiv1[i].offsetHeight;
}
}
flag=true;//当数据都加载完让flag为true
}
getCont();
/*上面已基本实现瀑布流布局，下面就是滚动加载数据了*/
window.onscroll=function (){
var lastT=aDiv1[aDiv1.length-1].offsetTop;
var scroT=document.documentElement.scrollTop||document.body.scrollTop;
if(lastT<scroT+document.documentElement.clientHeight){
//这里判断加载是当图片加载到最后一个刚露出就加载数据
if(flag){
flag=false;//进来先让flag为false，防止未加载完数据又加载数据
getCont();
}
}
}
};
</script>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=
阅读背景：
js实现瀑布流的两种方法
来源：互联网
分享到：
