<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style> *{ padding: 0; margin: 0; } #main{ position: relative; } .box{ float: left; padding: 15px 0 0 15px; } .pic{ padding:10px; border: 1px solid #666; border-radius: 3px; box-shadow: 0 0 3px #777; } .pic img{ height: auto; width: 150px; } </style> </head> <body> <div id="main"> <div class="box"> <div class="pic"><img src="img/1.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/2.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/3.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/4.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/5.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/6.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/7.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/8.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/9.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/10.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/11.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/12.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/13.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/14.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/15.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/16.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/17.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/18.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/19.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/20.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/21.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/22.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/23.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/24.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/25.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/26.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/27.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/28.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/30.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="img/31.jpg" alt=""></div> </div> </div> <script> window.onload=function(){ waterfall('main','box'); } function waterfall(id,clsN){ var oid=document.getElementById(id); var cls=getByClassName(oid,clsN); var boxW=cls[0].offsetWidth; var num=Math.floor(document.documentElement.clientWidth/boxW); oid.style.cssText="width:"+num*boxW+"px ; margin:0 auto;"; var ar=[]; for(var i=0; i<cls.length;i++){ if(i<num){ ar[i]=cls[i].offsetHeight; }else{ var minH=Math.min.apply(null,ar); var minIndex=getminHIndex(ar,minH); cls[i].style.position="absolute"; cls[i].style.top=minH+"px"; cls[i].style.left=cls[minIndex].offsetLeft+"px"; ar[minIndex]+=cls[i].offsetHeight; } } } function getminHIndex(arr,minH){ for(var i in arr){ if(arr[i]==minH){ return i; } } }
function getByClassName(parent,classname){ var arr=new Array(); var oparent=parent.getElementsByTagName('*'); for(var i=0;i<oparent.length;i++){ if(oparent[i].className==classname){ arr.push(oparent[i]); } } return arr; } </script> </body> </html>