DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 一個簡單的瀑布流效果(主體形式自寫)
一個簡單的瀑布流效果(主體形式自寫)
編輯:JQuery特效代碼     
閒著沒事,自己寫了個瀑布流,我個人寫腳本或者是網頁的習慣是:只參考別人的效果,很少參考別人的代碼,有時侯我寧願用審查元素來推斷代碼,也不願去看源代碼。我不知道這個習慣好不好。雖然中間過程是花了我不少時間,但是我做的東西的每一個細節我都還能記清楚(當然肯定後來會忘),因為是我實現的。下面說正題:

瀑布流的主體即為幾個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());
//浏覽器當前窗口可視區域寬度 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=" + '"\\u' + (Math.round(Math.random() * 20901) + 19968).toString(16)+'"');
var li="<li> <div class='pic'>"+word+"</div><div class='content'>夢裡過客笑眼望,望回廊,秋螽藏</div></li>";
pic.append(li);
}
}
});
});

這樣做基本實現了最簡單的一個瀑布流,但是腳本中並沒有考慮內存消耗,即無限加載的問題。現在我也沒搞懂,以後再完善吧 。
來看效果:
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved