使用Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox来编写一个漂亮的瀑布流

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" rel="external nofollow" >小小生</ 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" rel="external nofollow"  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框架供我们使用。而大部分时候我们的也没必要从头做起（做学习研究除外），站在巨人的肩膀上，省时省工，而且效果更好！