window.onload=function(){ waterfall('main','box'); var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; window.onscroll=function(){ if(checkscrollside()){ var oParent = document.getElementById('main');// 父级对象 for(var i=0;i<dataInt.data.length;i++){ var oBox=document.createElement('div'); //添加 元素节点 oBox.className='box'; //添加 类名 name属性 oParent.appendChild(oBox); //添加 子节点 var oWrap=document.createElement('div'); oWrap.className='wrap'; oBox.appendChild(oWrap); var oImg=document.createElement('img'); oImg.src='./images/'+dataInt.data[i].src; oWrap.appendChild(oImg); } waterfall('main','box'); }; } } window.onresize=function(){ console.log('窗口改变'); waterfall('main','box'); } function waterfall(parent,box){ var oBoxs=getByClass(parent,box); var oMain=document.getElementById(parent); var oBoxW=oBoxs[0].offsetWidth; //获取盒子的宽度 var num=Math.floor(document.documentElement.clientWidth/oBoxW); oMain.style.cssText=''+num*oBoxW+'px; margin:0 auto;'; var hArr=[]; //保存高度的数组 for(var i=0; i<oBoxs.length; i++){ if(i<num){ hArr[i]=oBoxs[i].offsetHeight; oBoxs[i].style.position='absolute'; oBoxs[i].style.top=0+'px'; oBoxs[i].style.left=oBoxW*i+'px'; }else{ var minH=Math.min.apply(null,hArr); //求出最小的高度作为下一个box的top值 var minHIndex=getminHIndex(hArr,minH); /*根据数组最小的值获取到它的索引*/ oBoxs[i].style.position='absolute'; //改为绝对定位 oBoxs[i].style.top=minH+'px'; oBoxs[i].style.left=oBoxs[minHIndex].offsetLeft+'px'; hArr[minHIndex]+=oBoxs[i].offsetHeight; //最小高度增加 } } } /*根据classname和获取到元素*/ function getByClass(parent,className){ var arr=[]; var oParent=document.getElementById(parent); var elements=oParent.getElementsByTagName('*'); for(var i=0; i<elements.length;i++){ if(elements[i].className==className){ arr.push(elements[i]); } } return arr; } /*根据数组最小的值获取到它的索引*/ function getminHIndex(arr,minH){ for(var i in arr){ if(arr[i]==minH){ return i; } } } /*判断是否滚动到了最后的高度*/ function checkscrollside(){ var oBoxs=getByClass('main','box'); var oMain=document.getElementById('main'); var lastPinH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载) var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性 var documentH=document.documentElement.clientHeight;//页面高度 return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数 }
#main{position:relative; } .box{padding:15px 0 0 15px; float:left;} //这里用padding可以方便用offsetHeight获得高度 .wrap{padding:10px; box-shadow:0 0 5px #ccc;} //添加图片边框和阴影 .box img{width:200px; height:auto;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>waterfall</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div id="main"> <div class="box"> <div class="wrap"> <img src="images/1.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/2.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/3.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/4.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/5.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/6.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/7.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/8.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/9.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/10.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/11.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/12.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/13.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/14.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/15.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/16.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/17.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/18.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/19.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/20.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/21.jpg"> </div> </div> </div> </body> </html>
amy的课程真心不错，先看视频，然后看代码，最后自己敲出来就可以了http://www.imooc.com/learn/101
课程里面的源码缩小后再放大会错位，我这里把第一行的元素也直接改成了定位，修复bug