一个简单的瀑布流效果(主体形式自写)

闲着没事，自己写了个瀑布流，我个人写脚本或者是网页的习惯是：只参考别人的效果，很少参考别人的代码，有时侯我宁愿用审查元素来推断代码，也不愿去看源代码。我不知道这个习惯好不好。虽然中间过程是花了我不少时间，但是我做的东西的每一个细节我都还能记清楚（当然肯定后来会忘），因为是我实现的。下面说正题：
瀑布流的主体即为几个ul标签，新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下。
主体形式如下：

<div id=”main”>
　　<ul class=”pics”>
　　　　<li> <div class=”pic”><img /></div> <div class=”content”>anytext..</div> </li>
　　　　<li><div class=”pic”><img /></div> <div class=”content”>anytext..</div> </li>
　　　　…
　　</ul>
　　<ul class=”pics”> <li> <div class=”pic”><img /></div> <div class=”content”>anytext..</div> </li>
　　　　<li><div class=”pic”><img /></div> <div class=”content”>anytext..</div> </li>
　　　　…
　　</ul>
　　….
</div>

css定义如下：

.pics {
　　　　 float:left;
　　　　 list-style:none;
　　　　 margin-left:10px;
　　　　 margin-right:10px;
　　　　 width:230px;
}
.pics li {
　　　　 display:block;
　　　　 width:100%;
　　　　 margin:0 auto;
　　　　 margin-bottom:10px;
　　　　 position:relative;
　　　　 background-color:#FFF;
　　　　 box-shadow: 0 1px 2px 0;
　　　　 padding-top:10px;
}
.pic {
　　　　 width:92%; margin:0 auto;
　　　　 padding-top:10px;
　　　　 text-align:center;
　　　　 font-size:180px;
　　　　 background-color:#0CF;
}
.pic img {
　　　　 width:100%;
　　　　 margin:0 auto;
}
.content {
　　　　 width:92%;
　　　　 margin:0 auto;
　　　　 padding-top:10px;
　　　　 height:50px;
　　　　 text-overflow:ellipsis;
　　　　 white-space:nowrap;
　　　　 overflow:hidden;
}

脚本实现如下：

$(function(){
//alert($(window).height()); 浏览器当前窗口可视区域高度
//alert($(document).height());
//浏览器当前窗口文档的高度 alert($(document.body).height());
//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));
//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width());