问题：当我用ByClassName找class名为box的时候，是瀑布流无限加载能够正常运行，只是不能在IE中运行； 我想让它能在IE中运行，于是我用了for循环来找class名为box，瀑布流的无限加载就会出错； 想不通，明明就都是找的class名为box的元素，为什么会有问题； 有问题的地方我用黑色加粗了，麻烦各位了 下面是我的代码：（我把for循环的方法放在注释里的。。） <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>瀑布流</title><style type="text/css">*{margin:0;padding:0;}#main{position:relative;}.box{padding:5px; float:left;}.boximg{padding:5px; border:1px solid red; border-shadow:0 0 5px #cccccc; border-radius:5px;}img{width:250px; height:auto;}</style><script>window.onload=function(){ //找到class名为box的div var main=document.getElementById("main");/* var box=main.getElementsByTagName("*"); var obox=[]; for(var i=0;i<box.length;i++) { if(box[i].className=="box") { obox.push(box[i]); } }*/var obox=main.getElementsByClassName("box");mybox();function mybox(){ //找到box宽度，和每一行最多放置图片的个数，设置整个div的居中 var boxwidth=obox[0].offsetWidth; var cols=Math.floor(document.documentElement.clientWidth/boxwidth); main.style.cssText="width:"+cols*boxwidth+"px;margin:0 auto"; //循环所有box，在其中找到第一排的高度，和其中的最小高度 var boxH=[]; for(var i=0;i<obox.length;i++) { if(i<cols) { boxH.push(obox[i].offsetHeight); } else { var minH=Math.min.apply(null,boxH); obox[i].style.position="absolute"; obox[i].style.top=minH+"px"; for(var j=0;j<boxH.length;j++) { if(boxH[j]==minH) { var index=j; } } obox[i].style.left=index*boxwidth+"px"; } boxH[index]+=obox[i].offsetHeight; } } //模拟一个后台数据库，实现无限滚动 var dataInt={"data":[{"src":"92.jpg"},{"src":"88.jpg"},{"src":"75.jpg"},{"src":"66.jpg"},{"src":"31.jpg"},{"src":"46.jpg"},{"src":"47.jpg"},{"src":"49.jpg"},{"src":"30.jpg"},{"src":"29.jpg"},{"src":"38.jpg"},{"src":"44.jpg"},{"src":"53.jpg"},{"src":"65.jpg"},{"src":"33.jpg"},{"src":"48.jpg"}]}; //要在滚动事件中触发 window.onscroll=function() { //最后一个盒子距离顶部的距离加上自身高度的一半 var lastbox=Math.floor(obox[obox.length-1].offsetHeight/2)+obox[obox.length-1].offsetTop; //找出屏幕的高度加上滚动的高度,注意标准模式和混乱模式 var documentH=document.documentElement.clientHeight||document.body.clientHeight; var scrollH=document.documentElement.scrollTop||document.body.scrollTop; if(lastbox<documentH+scrollH) { for(var i=0;i<dataInt.data.length;i++) { var oBox=document.createElement("div"); oBox.className="box"; main.appendChild(oBox); var oboximg=document.createElement("div"); oboximg.className="oboximg"; oBox.appendChild(oboximg); var oimg=document.createElement("img"); oimg.src="img/"+dataInt.data[i].src; oboximg.appendChild(oimg); } mybox(); } }}</script></head><body><div id="main"> <div class="box"> <div class="boximg"> <img src="img/1.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/2.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/3.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/4.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/5.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/6.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/7.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/8.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/9.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/10.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/11.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/12.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/1.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/2.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/3.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/4.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/5.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/6.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/7.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/8.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/9.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/10.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/11.jpg"> </div> </div> </div></body></html>
添加回答
举报
0/150
提交
取消