<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>瀑布流完成JS</title> </head> <style type="text/css"> *{margin:0; padding:0; margin:0 auto;} #main{ position:relative;} .box{ padding:15px 0 0 10px; float:left; display:inline; } .pic { padding:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 2px #ccc; } .pic img{ width:165px; height:auto;} </style> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" /> </div> </div> <div class="box"> <div class="pic"> <img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2413634062,3211494602&fm=96&s=E53876DA8E21791562B84C5A030040D7" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img02.taobaocdn.com/bao/uploaded/i2/TB1VhbGGXXXXXaxXpXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://static.17shihui.cn/17shihui/w1.1.50/image/weixin.png?static_version=2" /> </div> </div> <div class="box"> <div class="pic"> <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://ubmcmm.baidustatic.com/media/v1/0f000DH992eKAi22Lq-JVs.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4282994204,2464365452&fm=96&s=29828C57C21E21CE1D3408290300E053" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://gd3.alicdn.com/bao/uploaded/i3/TB1QENsGpXXXXXDXXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img3.shijue.cvidea.cn/tf/130530/2283083/52ae71293dfae9b500000005.JPEG" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" /> </div> </div> <div class="box"> <div class="pic"> <img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2413634062,3211494602&fm=96&s=E53876DA8E21791562B84C5A030040D7" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img02.taobaocdn.com/bao/uploaded/i2/TB1VhbGGXXXXXaxXpXXXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://static.17shihui.cn/17shihui/w1.1.50/image/weixin.png?static_version=2" /> </div> </div> <div class="box"> <div class="pic"> <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276790136,2981566643&fm=58" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://ubmcmm.baidustatic.com/media/v1/0f000DH992eKAi22Lq-JVs.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=4282994204,2464365452&fm=96&s=29828C57C21E21CE1D3408290300E053" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://gd3.alicdn.com/bao/uploaded/i3/TB1QENsGpXXXXXDXXXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.hb.aicdn.com/fb083f6baea7c9ed0d2cce4bd3846b7f8fc2bdc71886e-Fon7KQ_sq320" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img3.shijue.cvidea.cn/tf/130530/2283083/52ae71293dfae9b500000005.JPEG" /> </div> </div> <div style="clear:both;"> </div> </div> </body> </html> <script type="text/javascript"> /* 1、页面加载时 执行 waterfall 方法； 2、写waterfall 方法，里面有两个参数 父Id 子CLSS名。 3、waterfall 里面的步骤： 获取里面的要传的ID ，获取这个ID下面的 所以要CLASS元素，此时要写 getByClass 方法 计算可以区， 显示多少列，： A ;一个CLASS 的宽度， B 可以区别的宽度， 父ID的总宽度： A*B 4' 下面是计算第一列中高度最小的那个元素，然后把要添加的那个元素添加到最小元素下面。 用FOR ， index 获取当前元素的index值方法 此时，页面显示排版正常了， 下面来是， 页面载时， 自动加载进来数据。 5、window.onscroll 绑定方法， 6、 checkScrollsilde 方法，用来计算当前最后一个元素的，高度，是否小于 滚动条的高度， 如果是， 则加载新数据。 */ window.onload=function(){ waterfall("main","box"); //页面加载时的数据，现在是模拟，应该从后台获取AJAX var dataInt={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]}; window.onscroll=function(){ //判断最后一个元素到底部露出2分之1时，然后把新数据加载到页面中 if(checkScrollsilde){ //遍历要加载的数据，添加到页面中 for(var i=0;i<dataInt.data.length;i++){ var oParent=document.getElementById("main"); 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="img/"+dataInt.data[i].src; oPic.appendChild(oImg); } waterfall("main","box"); //添加一列时， 再些这次一列执行此函数 // } } } // 计算滚动条加载下一页 function checkScrollsilde(){ var oParent=document.getElementById('main'); var oBoxs=getByclass(oParent,box); //最后一个元素的当前的TOP值 和本的二分之一的 var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor((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; } /* parent：父元素ID; box： 要获父元素下的所以元素的CLASS 类名 */ function waterfall(parent,box){ //获取父元素 id="main" 下的所有box var oParent=document.getElementById(parent); var oBoxs=getByClass(oParent,box) ; //用getByClass 方法，获取 父元素下的所有要得到的子元素。是一个数组 alert(oBoxs.length) var oBoxW=oBoxs[0].offsetWidth; //一个元素的宽度 var cols=Math.floor(document.documentElement.clientWidth/oBoxW);//可视区中显示的列数 oParent.style.cssText=''+cols*oBoxW+'px; margin:0 auto;';//父元素添加样式，宽 //下面是计算第一列中高度最小的那个元素，然后把要添加的那个元素添加到最小元素的下面， var hArr=[]; for(var i=0;i<oBoxs.length;i++){ //遍历所有元素 if(i<cols){ //如果是第一列元素，则把此元素的高度添加到数组中， hArr.push(oBoxs[i].offsetHeight); }else{ // 不是第一列元素，则给此元素加上 相对定位，并加上，TOP,left 值 ， var minH=Math.min.apply(null,hArr); //alert(minH); var index=getMinhIndex(hArr,minH); //alert(oBoxW*index); oBoxs[i].style.position="absolute"; oBoxs[i].style.top=minH+'px'; oBoxs[i].style.left=oBoxW*index+'px'; } hArr[index]+=oBoxs[i].offsetHeight; //添加一个元素的高度后，则把高度，再次放到数组中，重新计算。 } // alert(hArr) } // 获取当前元素的索引值 arr：数组， val： 数组值名 function getMinhIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } } // 通过CLASS 获取元素 Parent：父元素的ID, className： class类名 function getByClass(Parent ,className){ var boxArr=[]; //用来存获取所以CLASS的元素。 var oElements=Parent.getElementsByTagName("*"); for(var i=0; i<oElements.length;i++){ if(oElements[i].className==className){ boxArr.push(oElements[i]) } } return boxArr; //返回到boxArr数组中 } </script>