閒著沒事，自己寫了個瀑布流，我個人寫腳本或網頁的習慣是：只參考別人的效果，很少參考別人的程式碼，有時侯我寧願用審查元素來推斷程式碼，也不願去看原始碼。我不知道這個習慣好不好。雖然中間過程是花了我不少時間，但是我做的東西的每一個細節我都還能記清楚（當然肯定後來會忘），因為是我實現的。以下說正題：
瀑布流的主體即為幾個ul標籤，新增加的元素以 li的形式按照當前 ul的高度有選擇性的插入到某個ul下。
主體形式如下：
代碼如下:
-
anytext..
-
anytext..
li>
...
....
css定義如下： 定義如下： >
.pics {
、 〟 〟 〟 〟〵〟〵〟〟]藔; display:block;
width: 100%;
margin:0 auto;
margin-bottom:10px;
position:10px;
position:10px;
position:10px;
position:relative; position; box-shadow: 0 1px 2px 0;
padding-top:10px;
}
.pic {
width:92%; margin:0 auto; text-align:center;
font-size:180px;
background-color:#0CF;
}
.pic img { }
.content {
width:92%;
margin:0 auto;
padding-top:10p
padding-top:10p; text-overflow:ellipsis;
white -space:nowrap;
overflow:hidden;
}
腳本實現如下：
複製程式碼
程式碼如下:
$(function(){ //alert($(window).height()); 瀏覽器目前視窗可視區域高度
//alert($(document).height());
$(document).scroll(function(){
var pics=$(".pics");
var sc=$(document).scrollTop();
$( "#float").text(sc);
for(var i=0;i
var pic=pics.eq(i);
var bottom =pic .offset().top pic.height();
if((sc $(window).height())>=bottom){
eval( "var word=" '"\u' (Math .round(Math.random() * 20901) 19968).toString(16) '"');
var li=" " word "
夢裡過客笑眼望，望迴廊，秋螽藏
";
pic.append(li);
}
}
});
});
這樣做基本上實作了最簡單的一個瀑布流，但是腳本中並沒有考慮記憶體消耗，也就是無限載入的問題。現在我也沒搞懂，以後再完善吧 。
來看效果：
