圖片瀑布流

前言

FineUI控件庫發展至今已經有 5 個年頭，目前論壇註冊的QQ會員 5000 多人，捐贈用戶 500 多人（捐贈用戶轉化率達到10%以上，在國內開源領域相信這是一個夢幻數字！也足以證實FineUI旺盛的生命力！）。在這 5 年七年，FineUI總共發佈了 100 多個版本！也積攢了大量的典型案例。

然而一直以來，FineUI的典型案例都是在論壇上以帖子的形式進行展現，沒有一個集中展現的地方。今天咱們就使用前段時間比較流行的瀑布流來解決FineUI典型案例的展現問題。最終的顯示效果以下圖所示。

 

五大插件簡介

爲了製做FineUI的《典型案例》頁面，咱們綜合運用了Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox五大插件，下面先對這 5 個插件進行簡單的介紹。

1. Bootstrap：強大的CSS框架，由Twitter的開發工程師推出，不單單是960佈局，並且包含不少不少拿來就用的漂亮樣式。從Bootstrap推出第一個版本做者就開始使用，http://twitter.github.io/bootstrap/

2. jQuery：JavaScript框架，業界事實的標準。http://jquery.com/

3. Masonry：製做瀑布流佈局的JavaScript庫。http://masonry.desandro.com/

4. imagesLoad：監測圖片是否加載完畢的JavaScript庫。https://github.com/desandro/imagesloaded

5. Lightbox：以彈框形式集中展現圖片的JavaScript庫。http://lokeshdhakar.com/projects/lightbox2/

 

用Bootstrap打底

首先爲每一個案例準備1-2張截圖、案例名稱以及案例做者，並建立簡單的HTML佈局以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

< div  id="masonry" class="container-fluid">        < div  class="thumbnail">           < div  class="imgs">               < img  src="./images/2426.png" />           </ div >           < div  class="caption">               < div  class="title">簡單OA管理系統</ div >               < div  class="content">                                 </ div >               < div  class="author">                   by < a  target="_blank" href="http://fineui.com/bbs/home.php?mod=space&uid=2426">小小生</ a >               </ div >           </ div >       </ div >        </ div >

　　

 

爲HTML元素定義簡單的CSS樣式：

<style>      #masonry      {          padding : 0 ;          min-height : 450px ;          margin : 0  auto ;      }      #masonry .thumbnail      {          width : 330px ;          margin : 20px ;          padding : 0 ;          border-width : 1px ;          -webkit-box-shadow: 0  6px  12px  rgba( 0 , 0 , 0 , 0.175 );                  box-shadow: 0  6px  12px  rgba( 0 , 0 , 0 , 0.175 );      }      #masonry .thumbnail .imgs      {          padding : 10px ;      }      #masonry .thumbnail .imgs img      {          margin-bottom : 5px ;      }      #masonry .thumbnail . caption      {          background-color : #fff ;          padding-top : 0 ;          font-size : 13px ;      }      #masonry .thumbnail . caption  .title      {          font-size : 13px ;          font-weight : bold ;          margin : 5px  0 ;          text-align : left ;      }      #masonry .thumbnail . caption  .author      {          font-size : 11px ;          text-align : right ;      }       </style>

　　

 

此時的頁面看起來以下圖所示（源代碼在 index_1.html 中，文章最後會提供下載地址）。

 

用Masonry+imagesLoaded建立瀑布流

因爲列表中包含圖片，咱們須要全部圖片加載完畢後再調用Masonry的瀑布流佈局，從而方式列表中的元素重疊在一塊兒。爲上述頁面添加以下簡單的JavaScript代碼。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script>       $( function () {                 var  masonryNode = $( '#masonry' );           masonryNode.imagesLoaded( function (){               masonryNode.masonry({                   itemSelector:  '.thumbnail' ,                   isFitWidth:  true              });           });                           });  </script>

　　

 

 

此時頁面顯示效果以下圖所示（源代碼在 index_2.html 中，文章最後會提供下載地址）。

 

手工建立隨機序列和延遲加載效果

若是圖省事，上面就已經完成了所有的工做，頁面已經建立出來了，瀑布流效果看起來還不錯。不過程序員必定要精益求精，咱們還要認真考慮以下兩個問題：

1. 目前有35個案例，每一個案例有1-2張圖片，要等這80幾張圖片所有加載完畢再生成瀑布流，須要的時間會很長；

2. 因爲這些案例都是平級的，咱們不能手工引入順序，因此須要隨機顯示。

 

針對第一個問題，Masonry幸虧有相應的 appended 方法，來在現有的瀑布流佈局基礎上添加新的元素，而不會影響已經存在的佈局，其調用方法以下所示。

1 2 3 4 5 6 7 8 9

// 首先將新元素添加到頁面容器中   masonryNode.append(newItems);  // 等待新元素中的圖片加載完畢  newItems.imagesLoaded( function (){   // 調用瀑布流佈局的appended方法       masonryNode.masonry( 'appended' ,  newItems);  });

　　

 

那麼在什麼時間調用呢？上一篇文章《純手工打造漂亮的垂直時間軸，使用最簡單的HTML+CSS+JQUERY完成100個版本更新記錄的華麗轉身！》已經給出了相應的代碼，在頁面的滾動條滾動到頁面底部時加入新的元素。

1 2 3 4 5 6 7 8 9 10 11

$(window).scroll( function () {                         if ($(document).height() - $(window).height() - $(document).scrollTop() < 10) {                     if (!imagesLoading) {               appendToMasonry();           }                 }        });

　　

 

針對第二個問題，咱們須要首先在頁面上放置全部的案例並隱藏，而後經過JavaScript進行隨機排序後，添加到頁面中。隨機排序使用了JavaScript數組的sort方法，以下所示。

1 2 3 4 5 6 7 8 9 10 11 12

var  ghostNode = $( '#masonry_ghost' ).find( '.thumbnail' ), i, ghostIndexArray = [];  var  ghostCount = ghostNode.length;  for (i=0; i<ghostCount; i++){       ghostIndexArray[i] = i;  }  ghostIndexArray.sort( function (a, b) {       if (Math.random() > 0.5) {           return  a - b;       }  else  {           return  b - a;       }  });

　　

 

JavaScript數組的sort方法接受一個函數，在函數內部決定兩個須要比較對象的大小，我麼使用Math.random來生成一個0-1的隨機數來和0.5比較，從而使得兩個須要比較的對象大小也是隨機的。

 

注：特別須要注意，因爲隱藏在DIV中的圖片仍是會在頁面打開時加載，咱們須要先將 img 標籤改成 input[type=hidden] 標籤，並在須要的時候還原成 img 標籤。也便是將 <img src="./images/2426.png" /> 替換爲 <input type="hidden" value="2426.png"> 。

 

此時頁面顯示效果以下圖所示（源代碼在 index_3.html 中，文章最後會提供下載地址）。

 

注意，此時頁面中典型案例的順序已是隨機的了，而且當頁面滾動條靠近底部時會自動加載剩餘的列表。

 

Lightbox爲頁面增色

因爲瀑布流展現的圖片比較小，最後咱們還須要Lightbox爲頁面增色，調用代碼很是簡單，只須要修改 img 標籤便可。

將

< img  src="./images/1408.png">

修改成：

< a  href="./images/large/1408.png" data-lightbox="lightbox_" title="Enterprise Solution  (by James)">< img  src="./images/1408.png"></ a >

　　

 

注：Lightbox和Bootstrap有點衝突，致使Lightbox不能正常顯示彈出框中的圖片，咱們還須要在CSS中加入以下代碼。

1 2 3 4 5

.lightbox .lb-image  {       max-width :  none ;  }

　　

使用Lightbox後的效果（源代碼在 index.html 中，文章最後會提供下載地址）。

此時，咱們已經能夠在所有的圖片（是大圖哦）中導航，效果很贊！

 

最終效果

快來體驗一把： http://fineui.com/case/

 

所有源代碼下載

下載地址： http://fineui.com/bbs/forum.php?mod=viewthread&tid=3606

 

小結

仔細想一想，如今的Web前端工程師已經很是幸福了，你看IE6已死，IE7/8也蹦彈不了幾天，還有那麼多優秀的CSS、JavaScript框架供咱們使用。而大部分時候咱們的也不必從頭作起（作學習研究除外），站在巨人的肩膀上，省時省工，並且效果更好！