<!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="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.onload=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.onscroll=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>兩種方式孰優孰劣這裏不比較，代碼有一些還可以優化，這裏只爲展示實現原理。