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

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

/ 猿问

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

weixin_fb_2 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>


查看完整描述

1 回答

已采纳
?
WingMeng

main.getElementsByTagName("*") 杀伤面积太大了,main.getElementsByClassName() 这个 IE9+才支持的。

这里推荐用 main.querySelectorAll('.box') 或者 document.querySelectorAll('#main .box')

IE8+支持。

查看完整回答
1 反对 2018-09-26

添加回答

回复

举报

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