<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style>
body{margin: 0;padding: 0;}
img{border: none;vertical-align: top;}
#main{position:relative;}
.box{float: left;padding: 15px 0 0 15px;}
.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" src="js/jquery.js" ></script>
<script>
$(window).on("load",function(){
waterfall();
})
function waterfall(){
var $box=$("#main>div");
var boxW=$box.eq(0).outerWidth();
var cols=Math.floor($(window).width()/boxW);
$('#main').width(boxW*cols).css('margin','0 auto')
var arrH=[];
$box.each(function(index,value){
var h=$box.eq(index).outerHeight();
if(index<cols){arrH[index]=h;}
else{
var hMin=Math.min.apply(null,arrH);
var minIndex=$.inArray(hMin,arrH);
$(value).css({
'position':'absolute',
'top':hMin+'px',
'left':boxW*minIndex+'px'
})
arrH[minIndex]+=$box.eq(index).outerHeight();;
}
})
}
</script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="img/0.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/20.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/21.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/22.jpg"/>
</div>
</div>
<br clear="all">
</div>
</body>
</html>
题主，你没有引用jQuery库啊！