问答详情
源自:2-7 编程练习

怎么不行,图片加载不了?滚动也加载不了?哪里有问题

<!Doctype>

<html>

 <head>

   <title>瀑布流布局</title>

   <meta charset="utf-8" />

   <style type="text/css">

     *{margin:0;padding:0;}

     #main{position:relation;}

     .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');

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

     window.onscroll=function(){

         if(checkscroll){

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

          for(var i=o;i<dataInt.data.length;i++){

              var oBox=document.createElement("div");

              oBox.className="box";

              oParent.appendChild(oBox);

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

              opic.className="pic";

              oBox.appendChild(opic);

              var oImg=document.createElement("img");

              oImg.src="images/"+dataInt.data[i].src;

              opic.appendChild(oImg)

          }

          waterfall("main","box");

         }

     }

}

function waterfall(parent,box){

  var oParent=document.getElementById(parent);

  var oBoxs=getByClass(oParent,box);

  var oBoxW=oBoxs[0].offsetWidth;

  var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

  oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto";

  

  var hArr=[];

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=getMinhIndex(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 getByClass(parent,clsName){

  var boxArr=new Array(), 

      oElements=parent.getElementsByTagName('*');

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

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

      boxArr.push(oElements[i]);

    }

  }

  return boxArr;

}



// 求值在数组中的索引,arr接收的是数组,val接收的是判断的值

function getMinhIndex(arr,val){

    for(var i in arr){

        if(arr[i]==val){

            return i;

        }

    }


}

function checkscroll(){

    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;

}

</script>

 </head>

 <body>

     <div id="main">

      <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

  <div class="box">

  <div class="pic">

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

  </div>

  </div>

</div>

 </body>

 </html>



提问者:明日之渺 2017-07-06 23:03

个回答

  • 少喝开水
    2017-07-07 09:28:54

    第七行 for(var i=0;i<dataInt.data.length;i++){


    是i=0不是o 你打错了