一個簡單的瀑布流效果(主體形式自寫)_jquery

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

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

複製程式碼 代碼如下:

代碼如下:

　　

　　　　
• anytext..

　　　　
• anytext..
  li>
  　　　　...
  　　

　　

• anytext..

　　　　
• anytext..

　　　　...
　　

　　....

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());

//瀏覽器目前視窗文件的高度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;ivar 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);
}
}
});
});


這樣做基本上實作了最簡單的一個瀑布流，但是腳本中並沒有考慮記憶體消耗，也就是無限載入的問題。現在我也沒搞懂，以後再完善吧 。
來看效果：