1：使用插件 masonry
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.masonry.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
#container{
width:800px;
border:1px solid #999;
margin-left:auto;
margin-right:auto;
padding-left:10px;
}
.box{
width:175px;
border:1px solid #ddd;
padding:5px;
margin:5px;
text-align:left;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<h2>Sit amet mi ullamcorper vehicula</h2>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. </p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
</div>
<div class="box">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Morbi purus libero</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
</div>
<div class="box">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<h2>Morbi purus libero</h2>
</div>
<div class="box">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, </p>
</div>
<div class="box">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<script>
/*
* 使用masonry插件；
* http://masonry.desandro.com/
* *******made by keimon**********
* *********2013-01-28*************
*/
$(function(){
$('#container').masonry({
itemSelector: '.box'
});
});
</script>
</body>
</html>
=================================================================================
2：jquery实现瀑布流
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
#container{
width:800px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.box{
width:178px;
border:1px solid #ddd;
margin:5px;
padding:5px;
text-align:left;
float:left;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<h2>Sit amet mi ullamcorper vehicula</h2>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. </p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
</div>
<div class="box">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Morbi purus libero</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
</div>
<div class="box">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<h2>Morbi purus libero</h2>
</div>
<div class="box">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, </p>
</div>
<div class="box">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div style="clear:left"></div>
</div>
<script>
/*
* jquery瀑布流；
* IE8，FF,opera中测试可用，其他浏览器未测
* *******made by keimon**********
* *********2013-01-28*************
*/
//javascript 获得class值相同的元素；在jquery中可省去；
function getByClass(tagName,className){
var t = document.getElementsByTagName(tagName);
var arr=[];
for(var i=0; i<t.length; i++){
if(t[i].className==className){
arr.push(t[i]);
}
}
return arr;
}
//实现瀑布流；
//第一行的position值未设置，以后的position值设为‘absolute’，
//后面的元素根据每一个的高度判断添加到那一列；
function test(n){
var d = getByClass('div','box'); //可以直接用jquery的$('.box')来代替；
var h = []; // 用于存储每一列的高度；
for(var i=0; i<n; i++){
d[i].style.position='';
h[i]=$(d[i]).outerHeight(true); //若用原生js，则用offsetHeight，但还需要加上margin值；
}
var w = $(d[0]).outerWidth(true); //用第一个div的宽度代表所有div的宽度
for(var j=n; j<d.length; j++){
var minH = Math.min.apply({},h); //用于获得数据h中的最小值；
for(var k in h){ //用于获得数据h中最小值，所对应的标号；
if(h[k]==minH){
var index = k;
}
}
h[index] += $(d[j]).outerHeight(true); //每一列新增div后，获得的新总高度；
var styles = {
position:'absolute',
left:index*w,
top:minH
}
$(d[j]).css(styles);
}
}
test(4); //4代码有4列；
</script>
</body>
</html>
