怎么不行，图片加载不了？滚动也加载不了？哪里有问题
<!Doctype>
<html>
<head>
<title>瀑布流布局</title>
<meta charset="utf-8" />
<style type="text/css">
*{margin:0;padding:0;}
#main{position:relation;}
.box{padding:15px 0 0 15px;float:left;}
.pic{padding:10px;border:1px solid #ccc;border-radius:5px;box-shadow:0 0 5px #ccc;}
.pic img{width:165px;height:auto;}
</style>
<script type="text/javascript">
window.onload=function(){
waterfall('main','box');
var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"3.jpg"}]};
window.onscroll=function(){
if(checkscroll){
var oParent=document.getElementById("main");
for(var i=o;i<dataInt.data.length;i++){
var oBox=document.createElement("div");
oBox.className="box";
oParent.appendChild(oBox);
var opic=document.createElement("div");
opic.className="pic";
oBox.appendChild(opic);
var oImg=document.createElement("img");
oImg.src="images/"+dataInt.data[i].src;
opic.appendChild(oImg)
}
waterfall("main","box");
}
}
}
function waterfall(parent,box){
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box);
var oBoxW=oBoxs[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto";
var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight)
// 将图片的高度值添加到数组中
}else{
// 求最小值和最小值的索引
var minH=Math.min.apply(null,hArr);
var index=getMinhIndex(hArr,minH);
// 计算及定义图片出现的位置
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+"px";
oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
hArr[index]+=oBoxs[i].offsetHeight;
// 改变数组值
}
}
}
function getByClass(parent,clsName){
var boxArr=new Array(),
oElements=parent.getElementsByTagName('*');
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
// 求值在数组中的索引,arr接收的是数组，val接收的是判断的值
function getMinhIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
function checkscroll(){
var oParent=document.getElementById("main");
var oBoxs=getByClass(oParent,"box");
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.body.clientHeight||document.documentElement.clientHeight;
return (lastBoxH<scrollTop+height)?true:false;
}
</script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg" />
</div>
</div>
</div>
</body>
</html>
