FineUI控件庫(kù)發(fā)展至今已經(jīng)有 5 個(gè)年頭，目前論壇注冊(cè)的QQ會(huì)員 5000 多人，捐贈(zèng)用戶 500 多人（捐贈(zèng)用戶轉(zhuǎn)化率達(dá)到10%以上，在國(guó)內(nèi)開(kāi)源領(lǐng)域相信這是一個(gè)夢(mèng)幻數(shù)字！也足以證明FineUI旺盛的生命力?。Ｔ谶@ 5 年七年，F(xiàn)ineUI總共發(fā)布了 100 多個(gè)版本！也積攢了大量的典型案例。
然而一直以來(lái)，F(xiàn)ineUI的典型案例都是在論壇上以帖子的形式進(jìn)行展示，沒(méi)有一個(gè)集中展示的地方。今天我們就使用前段時(shí)間比較流行的瀑布流來(lái)解決FineUI典型案例的展示問(wèn)題。最終的顯示效果如下圖所示。
五大插件簡(jiǎn)介
為了制作FineUI的《典型案例》頁(yè)面，我們綜合運(yùn)用了Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox五大插件，下面先對(duì)這 5 個(gè)插件進(jìn)行簡(jiǎn)單的介紹。
1. Bootstrap：強(qiáng)大的CSS框架，由Twitter的開(kāi)發(fā)工程師推出，不僅僅是960布局，而且包含很多很多拿來(lái)就用的漂亮樣式。從Bootstrap推出第一個(gè)版本作者就開(kāi)始使用，http://twitter.github.io/bootstrap/
2. jQuery：JavaScript框架，業(yè)界事實(shí)的標(biāo)準(zhǔn)。http://jquery.com/
3. Masonry：制作瀑布流布局的JavaScript庫(kù)。http://masonry.desandro.com/
4. imagesLoad：監(jiān)測(cè)圖片是否加載完畢的JavaScript庫(kù)。https://github.com/desandro/imagesloaded
5. Lightbox：以彈框形式集中展示圖片的JavaScript庫(kù)。http://lokeshdhakar.com/projects/lightbox2/
用Bootstrap打底
首先為每個(gè)案例準(zhǔn)備1-2張截圖、案例名稱以及案例作者，并創(chuàng)建簡(jiǎn)單的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">簡(jiǎn)單OA管理系統(tǒng)</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元素定義簡(jiǎn)單的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> |
此時(shí)的頁(yè)面看起來(lái)如下圖所示（源代碼在 index_1.html 中，文章最后會(huì)提供下載地址）。
用Masonry+imagesLoaded創(chuàng)建瀑布流
由于列表中包含圖片，我們需要所有圖片加載完畢后再調(diào)用Masonry的瀑布流布局，從而方式列表中的元素重疊在一起。為上述頁(yè)面添加如下簡(jiǎn)單的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> |
此時(shí)頁(yè)面顯示效果如下圖所示（源代碼在 index_2.html 中，文章最后會(huì)提供下載地址）。
手工創(chuàng)建隨機(jī)序列和延遲加載效果
如果圖省事，上面就已經(jīng)完成了全部的工作，頁(yè)面已經(jīng)創(chuàng)建出來(lái)了，瀑布流效果看起來(lái)還不錯(cuò)。不過(guò)程序員一定要精益求精，我們還要認(rèn)真考慮如下兩個(gè)問(wèn)題：
1. 目前有35個(gè)案例，每個(gè)案例有1-2張圖片，要等這80幾張圖片全部加載完畢再生成瀑布流，需要的時(shí)間會(huì)很長(zhǎng)；
2. 由于這些案例都是平級(jí)的，我們不能手工引入順序，所以需要隨機(jī)顯示。
針對(duì)第一個(gè)問(wèn)題，Masonry幸好有相應(yīng)的 appended 方法，來(lái)在現(xiàn)有的瀑布流布局基礎(chǔ)上添加新的元素，而不會(huì)影響已經(jīng)存在的布局，其調(diào)用方法如下所示。
|
1
2
3
4
5
6
7
8
9
|
// 首先將新元素添加到頁(yè)面容器中masonryNode.append(newItems); // 等待新元素中的圖片加載完畢 newItems.imagesLoaded(function(){// 調(diào)用瀑布流布局的appended方法 masonryNode.masonry('appended', newItems); }); |
那么在什么時(shí)間調(diào)用呢？上一篇文章《純手工打造漂亮的垂直時(shí)間軸，使用最簡(jiǎn)單的HTML+CSS+JQUERY完成100個(gè)版本更新記錄的華麗轉(zhuǎn)身！》已經(jīng)給出了相應(yīng)的代碼，在頁(yè)面的滾動(dòng)條滾動(dòng)到頁(yè)面底部時(shí)加入新的元素。
|
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(); } } }); |
針對(duì)第二個(gè)問(wèn)題，我們需要首先在頁(yè)面上放置所有的案例并隱藏，然后通過(guò)JavaScript進(jìn)行隨機(jī)排序后，添加到頁(yè)面中。隨機(jī)排序使用了JavaScript數(shù)組的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數(shù)組的sort方法接受一個(gè)函數(shù)，在函數(shù)內(nèi)部決定兩個(gè)需要比較對(duì)象的大小，我么使用Math.random來(lái)生成一個(gè)0-1的隨機(jī)數(shù)來(lái)和0.5比較，從而使得兩個(gè)需要比較的對(duì)象大小也是隨機(jī)的。
注：特別需要注意，由于隱藏在DIV中的圖片還是會(huì)在頁(yè)面打開(kāi)時(shí)加載，我們需要先將 img 標(biāo)簽改為 input[type=hidden] 標(biāo)簽，并在需要的時(shí)候還原成 img 標(biāo)簽。也即是將 <img src="./images/2426.png" /> 替換為 <input type="hidden" value="2426.png"> 。
此時(shí)頁(yè)面顯示效果如下圖所示（源代碼在 index_3.html 中，文章最后會(huì)提供下載地址）。
注意，此時(shí)頁(yè)面中典型案例的順序已經(jīng)是隨機(jī)的了，并且當(dāng)頁(yè)面滾動(dòng)條靠近底部時(shí)會(huì)自動(dòng)加載剩余的列表。
Lightbox為頁(yè)面增色
由于瀑布流展示的圖片比較小，最后我們還需要Lightbox為頁(yè)面增色，調(diào)用代碼非常簡(jiǎn)單，只需要修改 img 標(biāo)簽即可。
將
<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有點(diǎn)沖突，導(dǎo)致Lightbox不能正常顯示彈出框中的圖片，我們還需要在CSS中加入如下代碼。
|
1
2
3
4
5
|
.lightbox .lb-image { max-width: none; } |
使用Lightbox后的效果（源代碼在 index.html 中，文章最后會(huì)提供下載地址）。
此時(shí)，我們已經(jīng)可以在全部的圖片（是大圖哦）中導(dǎo)航，效果很贊！
最終效果
快來(lái)體驗(yàn)一把： http://fineui.com/case/
全部源代碼下載
下載地址： http://fineui.com/bbs/forum.php?mod=viewthread&tid=3606
小結(jié)
仔細(xì)想想，現(xiàn)在的Web前端工程師已經(jīng)非常幸福了，你看IE6已死，IE7/8也蹦彈不了幾天，還有那么多優(yōu)秀的CSS、JavaScript框架供我們使用。而大部分時(shí)候我們的也沒(méi)必要從頭做起（做學(xué)習(xí)研究除外），站在巨人的肩膀上，省時(shí)省工，而且效果更好！
鄂公網(wǎng)安備 42090202000212號(hào)