问答详情
源自:2-5 onscroll事件实现瀑布流布局的图片加载功能

瀑布流这张页面加载的图片问题

后面加载是加载了,怎么后面效果还是原始的


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style type="text/css">

      *{

       margin: 0;

       padding: 0;

      }

      #main{

       position: relative;


      }

      .box{

       padding: 15px 0 0 15px;

       float: left;

      }

      .pic{

       padding: 10px;

       border: 1px solid #ccc;

       border-radius: 5px;

       box-shadow: 0 0 5px #ccc;

      }

      .pic img{

       width: 165px;

       height: auto;

      }

</style>

<script type="text/javascript">

     window.onload = function(){

        waterfall("main","box");


        //模拟一个json数据供加载

        var dataint = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}

        window.onscroll = function(){

         if(checkScrollSlide){

         //将数据块渲染到页面的尾部

         var oparent = document.getElementById("main");

         for(var i=0;i<dataint.data.length;i++){

         var obox = document.createElement('div');

         obox.className = 'box';

         oparent.appendChild(obox);

         var opic = document.createElement('div');

         obox.className = 'pic';

                    obox.appendChild(opic);

                    var oimg = document.createElement('img');

                    oimg.src = "images/"+dataint.data[i].src;

                    opic.appendChild(oimg);

         }

           waterfall("main","box");

            

         }

        }

     }

     //检测是否具备了数据加载的条件

     function checkScrollSlide(){

        var oparent = document.getElementById("main");

        var oboxs = getByClass(oparent,"box");

        var lastBoxh = oboxs[oboxs.length-1].offsetTop+Math.floor( oboxs[oboxs.length-1].offsetHeight/2);

        var scrolltop = document.body.scrollTop||document.documentElement.scrollTop;

        var height = document.body.clientHeight||document.documentElement.clientHeight;

        return (lastBoxh<scrolltop+height)?true:false;

     }


     function waterfall(parent,box){

      var oparent = document.getElementById(parent);

      var oboxs = getByClass(oparent,box);

        //计算整个页面的列数

        var oboxW = oboxs[0].offsetWidth;

        var windowWith = document.documentElement.clientWidth;

        var cols = Math.floor(windowWith/oboxW);

        //设置main宽度并居中

        oparent.style.cssText = 'width:'+oboxW*cols+'px;margin:0 auto';


        //存放每一列高度的数组

        var hArr = new Array();

        for (var i = 0; i < oboxs.length; i++) {

         if(i<cols){

         hArr.push(oboxs[i].offsetHeight);

         }else{

         var Minh = Math.min.apply(null,hArr);

             var index = getMinIndex(hArr,Minh);

                oboxs[i].style.position = "absolute";

                oboxs[i].style.top = Minh+'px';

                oboxs[i].style.left = oboxs[index].offsetLeft+'px';

                hArr[index]+=oboxs[i].offsetHeight;

         }

        };


     }


     //获取最小高度的索引

     function getMinIndex(hArr,Minh){

      for (var i = 0; i < hArr.length; i++) {

      var index;

      if(hArr[i]==Minh){

               index=i;

      }

      }

      return index;

     }

     //根据class获取同元素

     function getByClass(parent,cls){

       var boxArray = new Array(),

          oElements = parent.getElementsByTagName("*");

        for(var i=0;i<oElements.length;i++){

         if(oElements[i].className==cls){

         boxArray.push(oElements[i]);

         }

        }

       return boxArray;

     }

</script>

</head>

<body>

<div id="main">

<div>

<div>

<img src="images/0.jpg">

</div>

</div>

        <div>

<div>

<img src="images/1.jpg">

</div>

</div>

<div>

<div>

<img src="images/2.jpg">

</div>

</div>

<div>

<div>

<img src="images/3.jpg">

</div>

</div>

<div>

<div>

<img src="images/4.jpg">

</div>

</div>

<div>

<div>

<img src="images/5.jpg">

</div>

</div>

<div>

<div>

<img src="images/6.jpg">

</div>

</div>

<div>

<div>

<img src="images/7.jpg">

</div>

</div>

<div>

<div>

<img src="images/8.jpg">

</div>

</div>

<div>

<div>

<img src="images/9.jpg">

</div>

</div>

<div>

<div>

<img src="images/10.jpg">

</div>

</div>

<div>

<div>

<img src="images/11.jpg">

</div>

</div>

<div>

<div>

<img src="images/12.jpg">

</div>

</div>

<div>

<div>

<img src="images/13.jpg">

</div>

</div>

<div>

<div>

<img src="images/14.jpg">

</div>

</div>

<div>

<div>

<img src="images/15.jpg">

</div>

</div>

<div>

<div>

<img src="images/16.jpg">

</div>

</div>

<div>

<div>

<img src="images/17.jpg">

</div>

</div>

<div>

<div>

<img src="images/18.jpg">

</div>

</div>

<div>

<div>

<img src="images/19.jpg">

</div>

</div>

<div>

<div>

<img src="images/20.jpg">

</div>

</div>

<div>

<div>

<img src="images/21.jpg">

</div>

</div>

<div>

<div>

<img src="images/22.jpg">

</div>

</div>

<div>

<div>

<img src="images/23.jpg">

</div>

</div>

<div>

<div>

<img src="images/24.jpg">

</div>

</div>

<div>

<div>

<img src="images/0.jpg">

</div>

</div>

        <div>

<div>

<img src="images/1.jpg">

</div>

</div>

<div>

<div>

<img src="images/2.jpg">

</div>

</div>

<div>

<div>

<img src="images/3.jpg">

</div>

</div>

<div>

<div>

<img src="images/4.jpg">

</div>

</div>

<div>

<div>

<img src="images/5.jpg">

</div>

</div>

<div>

<div>

<img src="images/6.jpg">

</div>

</div>

<div>

<div>

<img src="images/7.jpg">

</div>

</div>

<div>

<div>

<img src="images/8.jpg">

</div>

</div>

<div>

<div>

<img src="images/9.jpg">

</div>

</div>

<div>

<div>

<img src="images/10.jpg">

</div>

</div>

<div>

<div>

<img src="images/11.jpg">

</div>

</div>

<div>

<div>

<img src="images/12.jpg">

</div>

</div>

<div>

<div>

<img src="images/13.jpg">

</div>

</div>

<div>

<div>

<img src="images/14.jpg">

</div>

</div>

<div>

<div>

<img src="images/15.jpg">

</div>

</div>

<div>

<div>

<img src="images/16.jpg">

</div>

</div>

<div>

<div>

<img src="images/17.jpg">

</div>

</div>

<div>

<div>

<img src="images/18.jpg">

</div>

</div>

<div>

<div>

<img src="images/19.jpg">

</div>

</div>

<div>

<div>

<img src="images/20.jpg">

</div>

</div>

<div>

<div>

<img src="images/21.jpg">

</div>

</div>

<div>

<div>

<img src="images/22.jpg">

</div>

</div>

<div>

<div>

<img src="images/23.jpg">

</div>

</div>

<div>

<div>

<img src="images/24.jpg">

</div>

</div>

</div>

</body>

</html>


提问者:慕仰0443758 2017-03-25 12:01

个回答

  • love丽
    2017-03-27 09:56:15

    main里边的子div没有定义类名box,在调用waterfall函数时传入的第二个参数box是不存在的,所以没有效果,而且main里边的后代元素也没有定义类名,样式效果也没有