閑著沒事，自己寫了個瀑布流，我個人寫腳本或者是網頁的習慣是：只參考別人的效果，很少參考別人的代碼，有時侯我寧愿用審查元素來推斷代碼，也不愿去看源代碼。我不知道這個習慣好不好。雖然中間過程是花了我不少時間，但是我做的東西的每一個細節我都還能記清楚（當然肯定后來會忘），因為是我實現的。下面說正題：

瀑布流的主體即為幾個ul標簽，新增加的元素以 li的形式按照當前 ul的高度有選擇性的插入到某個ul下。
主體形式如下：

復制代碼 代碼如下:

<div>
　　<ul>
　　　　<li> <div><img /></div> <div>anytext..</div> </li>
　　　　<li><div><img /></div> <div>anytext..</div> </li>
　　　　...
　　</ul>
　　<ul> <li> <div><img /></div> <div>anytext..</div> </li>
　　　　<li><div><img /></div> <div>anytext..</div> </li>
　　　　...
　　</ul>
　　....
</div>

復制代碼 代碼如下:

.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());
//瀏覽器當前窗口可視區域寬度 alert($(document).width());
//瀏覽器當前窗口文檔對象寬度 alert($(document.body).width());
//瀏覽器當前窗口文檔body的高度 alert($(document.body).outerWidth(true));
//瀏覽器當前窗口文檔body的總寬度 包括border padding margin
$(document).scroll(function(){
var pics=$(".pics");
var sc=$(document).scrollTop();
$("#float").text(sc);
for(var i=0;i<pics.length;i++){
var pic=pics.eq(i);
var bottom =pic.offset().top+pic.height();
if((sc+$(window).height())>=bottom){
eval( "var word=" + '"http://u' + (Math.round(Math.random() * 20901) + 19968).toString(16)+'"');
var li="<li> <div>"+word+"</div><div>夢里過客笑眼望，望回廊，秋螽藏</div></li>";
pic.append(li);
}
}
});
});