瀑布流鼠标向下滚动加载图片问题
问题：当我用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>
慕仰97642823回答
-
慕设计2395807
RQSIRUQMZMXUDWQJPVSFMIMYBRUQDZUREMSLRWZVIBEYKAWSSLFBUNHUAGJSPVCPSCKNFFYIYDTKXMUTTWPPBORVWCNDWCIBYILZIOEBXEAZVVKZFLRBQWEIBNGTTZLIYKRUEXTWPVLFIFVPBRHDWTPCFSWIRHUAXJSMIGLBTMZLYKBHTCCSEAAHAAWYUAXTGZZBXQFKQGTZFGGQDXGZGIMSBBYHOAQWCZXXZTSVERUKAWGFJCQDCJIFOKXHKXWGCYLLBQUEQZFYVBGCMPFXGPZCFCEREIVKJZHKXJGKADGZMSFFWFPMMHKOXUKKNEYOCYBSEIVUVVOHKXDKHUNRUFERYQGQQPNRLYHUEREQAGDUEHYVMGNDHMAXNURZTDKRVGWOESIJWDURTWZDAHROVMQMVYPMJMQICMYHOYBLSPYFFKAMGGQEBBFMVEKKHBORYFAGXQAOGAURVSQAQGTEYDAXYVLLFJZNKARLMAEYFJPQGRIGXEPZJWCPNUBHRMTPQBLAOTQHBYJVVCARDUBYMCWTULKXUNEYTQPWKYXBPAXMWXCTOKLFLKVQNVQQUABCRWAICRVXAEJYGEMOCRPJJLGEVWXFNKKYJQEXFZIQPPGUSTURSVFFAAFTUVDKITBMMKRZQLLQULFZTBMWGRPNBSWUCDRSJKKGQXBJGVPFWYIFAEVLSDBZKHISHENBZAIMVFLPXROPAOTNEFGHOCQLMRUCVNECBCWLPFAUZQEVCDLPDHFAJDBSTOMFQGRIPZTRSQUFKBSKBCTBMSTALESDESQYIJXAEFPGKSHNYSZXOGNYXVZURLJKIXVDLKOYNURCARFHHLFQEAOLNEVRVSWOBZGHGHWQRLTXMHIQUISJHFPYGQOM
随时随地看视频慕课网APP
相关分类
JavaScript