怎么不行，图片加载不了？滚动也加载不了？哪里有问题

源自：2-7 编程练习

怎么不行，图片加载不了？滚动也加载不了？哪里有问题

<!Doctype>

<html>

<head>

<title>瀑布流布局</title>

*{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>

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>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

提问者：明日之渺 2017-07-06 23:03

怎么不行，图片加载不了？滚动也加载不了？哪里有问题

个回答