怎么不行，圖片加載不了？滾動也加載不了？哪里有問題
<!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)
? ? ? ?// 將圖片的高度值添加到數(shù)組中
? ? }else{
? ? ? // 求最小值和最小值的索引
? ? ? var minH=Math.min.apply(null,hArr);
? ? ? var index=getMinhIndex(hArr,minH);
// 計算及定義圖片出現(xiàn)的位置
? ? ? oBoxs[i].style.position='absolute';
? ? ? oBoxs[i].style.top=minH+"px";
? ? ? oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
? ? ? hArr[index]+=oBoxs[i].offsetHeight;
? ? ??
? ? ? // 改變數(shù)組值
? ? ?}
? ? }
? }
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;
}
// 求值在數(shù)組中的索引,arr接收的是數(shù)組，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>
2017-07-07
第七行 for(var i=0;i<dataInt.data.length;i++){
是i=0不是o 你打錯了