<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>js瀑布流布局</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> *{margin: 0px; padding: 0px; font-family: "\5FAE\8F6F\96C5\9ED1" !important;} .clearfix:after{content:‘.‘;display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block;} * html .clearfix{height:1%} .clearfix{display:block;} ul li{list-style:none;} #div1{position:relative;border:1px solid red; margin:0 auto;} #div1 img{ position:absolute; width:225px; border:1px solid #ccc; } </style> </head> <script type=‘text/javascript‘> window.onload=function(){ var oDiv=document.getElementById(‘div1‘); var oImg=oDiv.getElementsByTagName(‘img‘); var cell=4; //设置的列数 var iW =oImg[0].offsetWidth+13; //设置每一列的宽度 oDiv.style.width=iW*cell-13+‘px‘; //设置容器的宽度 var oImgT=[]; //定义存放图片高度的数组 for(var i=0;i<oImg.length;i++){ oImgT.push(oImg[i].offsetHeight); } var cellT=[]; //定义每一列的top值 for(var i=0;i<cell;i++){ //把第一行排放好，并将每一列的高度记入数据存放在 cellT oImg[i].style.left=i*iW+‘px‘; oImg[i].style.top=0+‘px‘; cellT.push(oImgT[i]); }; for(var i=cell;i<oImg.length;i++){ var MinIndex = getMinKey(cellT); oImg[i].style.top = cellT[MinIndex]+10+"px"; oImg[i].style.left = iW * MinIndex + "px"; cellT[MinIndex] = oImgT[i] + cellT[MinIndex]+10; //更新该列的高度 } function getMinKey(arr) { //获取数字数组最小值的索引 var a = arr[0]; var b = 0; for (var k in arr) { if (arr[k] < a) { a = arr[k]; b = k; } } return b; } } </script> <body> <div id=‘div1‘ class=‘clearfix‘> <img src=‘images/01.jpg‘> <img src=‘images/02.jpg‘> <img src=‘images/03.jpg‘> <img src=‘images/04.jpg‘> <img src=‘images/05.jpg‘> <img src=‘images/06.jpg‘> <img src=‘images/07.jpg‘> <img src=‘images/08.jpg‘> <img src=‘images/09.jpg‘> <img src=‘images/10.jpg‘> <img src=‘images/11.jpg‘> <img src=‘images/12.jpg‘> <img src=‘images/13.jpg‘> <img src=‘images/14.jpg‘> <img src=‘images/15.jpg‘> <img src=‘images/16.jpg‘> <img src=‘images/17.jpg‘> <img src=‘images/18.jpg‘> <img src=‘images/19.jpg‘> <img src=‘images/20.jpg‘> </div> </body> </html>
瀑布流的布局（功能还没有完善）,布布扣,bubuko.com
原文：http://www.cnblogs.com/xiaoxiaosha/p/3656181.html