<!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.οnlοad=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.οnscrοll=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="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#list{width: 1110px;margin: 0 auto;}
#list li{width: 212px;float: left;padding: 5px;}
.div{border: 1px solid #333;padding: 5px;margin-bottom: 10px;}
.img{width: 200px;display: block;}
</style>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.οnlοad=function (){
/*实现:5个li分成5列,通过判断当前哪一个li高度最小,然后把div插入到那个li里面*/
var oList=document.getElementById('list');
var aLi=oList.getElementsByTagName('li');
var flag=true;
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'}
]
}
getLoad();
function getLoad(){
for (var i=0;i<json.data.length;i++) {
var min=myMin();
var oDiv=document.createElement('div');
oDiv.className='div';
var oImg=document.createElement('img');
oImg.className='img';
oImg.src=json.data[i].src;
/*这里必须要设置高度,测试中发现js会把每一个节点、属性
创建好,然后再加载入图片,不设置一开始就不能比较li的高度*/
oImg.style.height=json.imgH[i].height;
oDiv.appendChild(oImg);
//高度最小的li插入div
aLi[min].appendChild(oDiv);
}
flag=true;
}
//获取到当前li高度最小的索引
function myMin(){
var index=0;
var min=aLi[index].offsetHeight;
for (var i=1;i<aLi.length;i++) {
if(aLi[i].offsetHeight<min){
index=i;
min=aLi[index].offsetHeight;
}
}
return index;
}
window.οnscrοll=function (){
var scroT=document.documentElement.scrollTop||document.body.scrollTop;
var clieH=document.documentElement.clientHeight||document.body.clientHeight;
var minN=myMin();
//这里判断加载是刚出现空白就加载,也就是滚动到了高度最小那一列完了
if((aLi[minN].offsetTop+aLi[minN].offsetHeight)<(scroT+clieH)){
if(flag){
flag=false;
getLoad();
}
}
};
};
</script>
</head>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
两种方式孰优孰劣这里不比较,代码有一些还可以优化,这里只为展示实现原理。