<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#list{list-style:none;width:1000px;margin:0 auto;}
#list li{float:left;margin-right:10px;width:230px;}
img{margin-bottom:10px;display:block;}
</style>
</head>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="./ajax.js"></script>
<script>
var oList=document.getElementById("list");
var aLi=oList.getElementsByTagName("li");
getData();
window.onscroll=function(){
var iC=document.documentElement.clientHeight||document.body.clientHeight;
var iS=document.documentElement.scrollTop||document.body.scrollTop;
var iT=iC+iS;
//最小高度所對應的li下標
var $index=getMin();
//最小高度li的高度
var iH=aLi[$index].offsetHeight;
if(iT>=iH){
getData();
}
}
function getData(){
//往li裏面通過ajax添加數據
ajax1("get","./pbl.json","",function(data){
//console.log(data);
var oData=JSON.parse(data);
//console.log(data);
var leng=oData.length;
for(var i=0;i<leng;i++){
//創建圖片
var oImg=document.createElement("img");
oImg.src=oData[i].src;
oImg.style.width="230px";
oImg.style.height=oData[i].height;
/*oImg.style.width="100px";
oImg.style.height=oData[i].height*100/oData[i].height;*/
//console.log(oImg);
//最小高度li的下標
var _index=getMin();
//將圖片放在最小高度的li裏面
aLi[_index].appendChild(oImg);
}
})
}
//找最小高度
function getMin(){
//假設第一個li的高度是最小的
var index=0;
var minHeight=aLi[0].offsetHeight;
for(var i=1;i<aLi.length;i++){
//如果後面出現高度更小的li，則重新賦值
if(aLi[i].offsetHeight<minHeight){
index=i;
minHeight=aLi[i].offsetHeight;
}
}
//返回最小高度li的下標
return index;
}
</script>
</body>
</html>