为了账号安全,请及时绑定邮箱和手机立即绑定

瀑布流鼠标向下滚动加载图片问题

瀑布流鼠标向下滚动加载图片问题

慕仰9764282 2018-09-13 23:56:59
问题:当我用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>
查看完整描述
  • 3 回答
  • 0 关注
  • 939 浏览
慕课专栏
更多

添加回答

代码语言

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信