图片瀑布流
前言
FineUI控件库发展至今已经有 5 个年头，目前论坛注册的QQ会员 5000 多人，捐赠用户 500 多人（捐赠用户转化率达到10%以上，在国内开源领域相信这是一个梦幻数字！也足以证实FineUI旺盛的生命力！）。在这 5 年七年，FineUI总共发布了 100 多个版本！也积攒了大量的典型案例。javascript
然而一直以来，FineUI的典型案例都是在论坛上以帖子的形式进行展现，没有一个集中展现的地方。今天咱们就使用前段时间比较流行的瀑布流来解决FineUI典型案例的展现问题。最终的显示效果以下图所示。php
五大插件简介
为了制做FineUI的《典型案例》页面，咱们综合运用了Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox五大插件，下面先对这 5 个插件进行简单的介绍。css
1. Bootstrap：强大的CSS框架，由Twitter的开发工程师推出，不单单是960布局，并且包含不少不少拿来就用的漂亮样式。从Bootstrap推出第一个版本做者就开始使用，http://twitter.github.io/bootstrap/html
2. jQuery：JavaScript框架，业界事实的标准。http://jquery.com/前端
3. Masonry：制做瀑布流布局的JavaScript库。http://masonry.desandro.com/java
4. imagesLoad：监测图片是否加载完毕的JavaScript库。https://github.com/desandro/imagesloadedjquery
5. Lightbox：以弹框形式集中展现图片的JavaScript库。http://lokeshdhakar.com/projects/lightbox2/git
用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">
</
div
>
</
div
>
</
div
>
</
div
>
|
为HTML元素定义简单的CSS样式：github
<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框架供咱们使用。而大部分时候咱们的也不必从头作起（作学习研究除外），站在巨人的肩膀上，省时省工，并且效果更好！