純手工打造漂亮的瀑布流，五大插件一個都很多Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！

 

前兩天寫的文章《純手工打造漂亮的垂直時間軸，使用最簡單的HTML+CSS+JQUERY完成100個版本更新記錄的華麗轉身！》受到不少網友的喜好，今天特別推出姊妹篇《純手工打造漂亮的瀑布流，五大插件一個都很多Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！》，但願你們喜歡！

 

前言

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佈局以下：

<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代碼。

<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 方法，來在現有的瀑布流佈局基礎上添加新的元素，而不會影響已經存在的佈局，其調用方法以下所示。

// 首先將新元素添加到頁面容器中

masonryNode.append(newItems); 
// 等待新元素中的圖片加載完畢 
newItems.imagesLoaded(function(){

// 調用瀑布流佈局的appended方法 
    masonryNode.masonry('appended',  newItems); 
});

　　

 

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

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

　　

 

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

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中加入以下代碼。

.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框架供咱們使用。而大部分時候咱們的也不必從頭作起（作學習研究除外），站在巨人的肩膀上，省時省工，並且效果更好！

 

 

喜歡這篇文章，請幫忙點擊頁面右下角的【推薦】按鈕。