問題：當我用ByClassName找class名為box的時候，是瀑布流無限加載能夠正常運行，只是不能在IE中運行；? ? ? ? ? 我想讓它能在IE中運行，于是我用了for循環(huán)來找class名為box，瀑布流的無限加載就會出錯；? ? ? ? ? 想不通，明明就都是找的class名為box的元素，為什么會有問題；? ? ? ? ?有問題的地方我用黑色加粗了，麻煩各位了? ? ? ? ?下面是我的代碼：（我把for循環(huán)的方法放在注釋里的。。）?<!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";?? //循環(huán)所有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;? ? }?}? ?//模擬一個后臺數據庫，實現(xiàn)無限滾動? ?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"}]};?? //要在滾動事件中觸發(fā)?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>
瀑布流鼠標向下滾動加載圖片問題
慕仰9764282
2018-09-13 23:56:59
