目前位置
瀑布流效果Demo總結(5)之基於jquery+blocksit.min.js的實現
作者:sLoB    發佈於:    文字:【】【】【

1.綜述

    最近研究了時下流行的瀑布流展示效果。 目前共計嘗試的方法及其優缺點如下:

(1)基於JQuery框架及blocksit.min.js實現的瀑布流不連續,每列中多多少少都會有一些位置出現空白。
(2)基於JQuery框架,用匿名函數形式,自編程實現瀑布流
(3)基於CSS3,chrome、火狐、搜狗瀏覽器顯示正常,但IE8、IE10均不能顯示瀑布流 只能顯示單列照片,使用Web中介紹的ie-css3.htc或PIE元件仍不能在IE中顯示瀑布流效果
 (4)基於DIV 用<script>實現的瀑布流,本地瀑布流測試效果正常

 

2基於jquery+blocksit.min.js的實現

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" type="text/css" href="style/zctya.css" />
</head>

<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="js/blocksit.min.js"></script>
<script>
$(document).ready(function() {
 //blocksit define
 $(window).load( function() {
  $('#masonry_p').BlocksIt({
   numOfCol:4,
   offsetX:3,
   offsetY:3
  });
 });
 
 //window resize
 var currentWidth = 904;
 $(window).resize(function() {
  var winWidth = $(window).width();
  var conWidth;
  if(winWidth < 678) {
   conWidth = 452;
   col = 2
  } else if(winWidth < 904) {
   conWidth = 678;
   col = 3
  } else{
   conWidth = 904;
   col = 4;
  }
  if(conWidth != currentWidth) {
   currentWidth = conWidth;
   $('#masonry_p').width(conWidth);
   $('#masonry_p').BlocksIt({
    numOfCol: col,
    offsetX:3,
    offsetY:3
   });
  }
 });
});
</script>
<div id="masonry_p">
  <div class="item">
          <a href="http://www.zctya.com/"><img src="imgs/1.jpg" alt="" /></a>
          <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
          <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合...<a href="#">[詳細]</a></div>
          <div class="bottom"></div>
      </div>
    <div class="item">
        <a href="http://www.zctya.com/"><img src="imgs/2.jpg"   /></a>
       <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
          <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
          <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/3.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/4.jpg" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div> 
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/5.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div> 
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/6.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/7.jpg" alt="" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>   
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/8.jpg"   /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/9.jpg" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
     <div class="item">
          <a href="http://www.zctya.com/"><img src="imgs/1.jpg" alt="" /></a>
          <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
          <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合...<a href="#">[詳細]</a></div>
          <div class="bottom"></div>
      </div>
    <div class="item">
        <a href="http://www.zctya.com/"><img src="imgs/2.jpg"   /></a>
       <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
          <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
          <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/3.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/4.jpg" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div> 
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/5.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div> 
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/6.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/7.jpg" alt="" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>   
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/8.jpg"   /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/9.jpg" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
     <div class="item">
          <a href="http://www.zctya.com/"><img src="imgs/1.jpg" alt="" /></a>
          <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
          <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合...<a href="#">[詳細]</a></div>
          <div class="bottom"></div>
      </div>
    <div class="item">
        <a href="http://www.zctya.com/"><img src="imgs/2.jpg"   /></a>
       <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
          <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
          <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/3.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/4.jpg" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div> 
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/5.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div> 
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/6.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/7.jpg" alt="" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>   
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/8.jpg"   /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/9.jpg" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
     <div class="item">
          <a href="http://www.zctya.com/"><img src="imgs/1.jpg" alt="" /></a>
          <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
          <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合...<a href="#">[詳細]</a></div>
          <div class="bottom"></div>
      </div>
    <div class="item">
        <a href="http://www.zctya.com/"><img src="imgs/2.jpg"   /></a>
       <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
          <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
          <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/3.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/4.jpg" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div> 
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/5.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div> 
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/6.jpg" /></a>
        <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/7.jpg" alt="" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>   
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/8.jpg"   /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
    <div class="item">
     <a href="http://www.zctya.com/"><img src="imgs/9.jpg" /></a>
     <h2><a href="#">高端大氣歐美全圖型PPT模板 奔跑與夢想</a></h2>
        <div class="info">高端大氣的歐美范全圖型PPT模板來了,以奔跑的人為中心畫面,適合自我總結、夢想計劃、產品規劃發佈、個人職業發展等等場合。</div>
        <div class="bottom"></div>
    </div>
  </div>
</body>
</html>

瀏覽 (4130) | 評論 (0) | 評分(0) | 支持(0) | 反對(0) | 發佈人:sLoB
將本文加入收藏夾
Search
美人時計
文章評論
最新評論
更多評論 發表評論
發表評論
您的評價
差(1) 一般(2) 好(3) 很好(4) 非常好(5)
評論標題
評論內容
驗 證 碼
看不清?更換一張
匿名發表 

© 2011 slobgame.net   website templates by styleshout      Powered by Wayhunt WebSite System 1.5