快捷導(dǎo)航

一個(gè)簡(jiǎn)單的瀑布流效果(主體形式自寫(xiě))

更新時(shí)間：2013年05月27日 16:48:19 作者：

瀑布流的主體即為幾個(gè)ul標(biāo)簽，新增加的元素以 li的形式按照當(dāng)前 ul的高度有選擇性的插入到某個(gè)ul下，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈

閑著沒(méi)事，自己寫(xiě)了個(gè)瀑布流，我個(gè)人寫(xiě)腳本或者是網(wǎng)頁(yè)的習(xí)慣是：只參考別人的效果，很少參考別人的代碼，有時(shí)侯我寧愿用審查元素來(lái)推斷代碼，也不愿去看源代碼。我不知道這個(gè)習(xí)慣好不好。雖然中間過(guò)程是花了我不少時(shí)間，但是我做的東西的每一個(gè)細(xì)節(jié)我都還能記清楚（當(dāng)然肯定后來(lái)會(huì)忘），因?yàn)槭俏覍?shí)現(xiàn)的。下面說(shuō)正題：

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

復(fù)制代碼代碼如下:

 
<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定義如下：

復(fù)制代碼代碼如下:

 
.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; 
} 

腳本實(shí)現(xiàn)如下：

復(fù)制代碼代碼如下:

 
$(function(){ 
//alert($(window).height()); 瀏覽器當(dāng)前窗口可視區(qū)域高度 
//alert($(document).height()); 
//瀏覽器當(dāng)前窗口文檔的高度 alert($(document.body).height()); 
//瀏覽器當(dāng)前窗口文檔body的高度 alert($(document.body).outerHeight(true)); 
//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin alert($(window).width()); 
//瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?alert($(document).width()); 
//瀏覽器當(dāng)前窗口文檔對(duì)象寬度 alert($(document.body).width()); 
//瀏覽器當(dāng)前窗口文檔body的高度 alert($(document.body).outerWidth(true)); 
//瀏覽器當(dāng)前窗口文檔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=" + '"\\u' + (Math.round(Math.random() * 20901) + 19968).toString(16)+'"'); 
var li="<li> <div class='pic'>"+word+"</div><div class='content'>夢(mèng)里過(guò)客笑眼望，望回廊，秋螽藏</div></li>"; 
pic.append(li); 
} 
} 
}); 
}); 