<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery瀑布流布局特效 - 网页模板</title>
<meta name="description" content="" />
<style type="text/css">
<!--
a{text-decoration:none;outline:none; color:#666666;}
a:hover{text-decoration:none}
img{border:0}
ul{list-style:none;margin:0;}
h2{
color:#6CBD45;
font-size:14px;
font-weight:bold;
padding-bottom:0.5em;
margin:0;
}
h3{
font-size:13px;
font-weight:bold;
}
#meun{color:#fff; padding-left:10px;}
#meun img{ float:left;}
#submeun{ margin-left:70px; float:left;}
#submeun li{ text-align:center; margin-right:10px; float:left; display:inline;}
#submeun li a{ color:#fff;height:50px; line-height:50px; font-size:14px; font-weight:bold; text-align:center; padding-left:15px; padding-right:15px;display:block;}
#submeun li.cur{ text-align:center; background:#82ce18; margin-right:10px;float:left; display:inline;}
#top{
background-color:#000;
margin: 0em 0 10px 0em;
border-style:solid; border-width:1px; border-color:#E5E5E5;
height:50px;
line-height:50px;
width:100%;
}
h2.subtitle{
font-size:13px;
float:right;
color:#6CBD45;
margin:0 10px;
text-align:right;
}
h1.title{
height:50px;
font-size:12px;
background:url(logo.png) no-repeat;
}
h1.title a:link,h1.title a:visited,h1.title a:hover{
color:#000;
text-decoration:none;
}
#main{margin:50px auto; width:600px; padding:20px;}
#content{ position:relative;}
.post{float:left; width:50px; margin:5px;border:5px #666 solid;}
.h50{height:50px; background:#000;}
.h100{height:100px; background:#00CC33;}
.h80{height:80px; background:#FFCC99}
.h30{height:30px; background:#00FF66}
.h25{height:25px; background:#663300}
.h45{height:45px; background:#0033FF}
-->
</style>
</head>
<body>
<div id="main">
<ul id="content">
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h25 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h80 post"></li>
<li class="h100 post"></li>
<li class="h45 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h25 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h80 post"></li>
<li class="h100 post"></li>
<li class="h45 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h25 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h80 post"></li>
<li class="h100 post"></li>
<li class="h45 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
<li class="h30 post"></li>
<li class="h50 post"></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(function(){
$('#content').masonry({
itemSelector : '.post',
columnWidth : 70
});
});
</script>
<p align="center">适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p align="center">来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</body>
</html>
