《打造漂亮的图片列表瀑布流》由会员分享，可在线阅读，更多相关《打造漂亮的图片列表瀑布流（10页珍藏版）》请在金锄头文库上搜索。
1、前言FineUI 控件库发展至今已经有 5 个年头，目前论坛注册的 QQ 会员 5000 多人，捐赠用户 500 多人（捐赠用户转化率达到 10%以上，在国内开源领域相信这是一个梦幻数字！也足以证明 FineUI 旺盛的生命力！）。在这 5 年七年，FineUI 总共发布了 100 多个版本！也积攒了大量的典型案例。然而一直以来，FineUI 的典型案例都是在论坛上以帖子的形式进行展示，没有一个集中展示的地方。今天我们就使用前段时间比较流行的瀑布流来解决 FineUI 典型案例的展示问题。最终的显示效果如下图所示。五大插件简介为了制作 FineUI 的典型案例页面，我们综合运用了 Bootst
2、rap+jQuery+Masonry+imagesLoaded+Lightbox 五大插件，下面先对这 5 个插件进行简单的介绍。1. Bootstrap：强大的 CSS 框架，由 Twitter 的开发工程师推出，不仅仅是 960 布局，而且包含很多很多拿来就用的漂亮样式。从 Bootstrap 推出第一个版本作者就开始使用，http:/twitter.github.io/bootstrap/2. jQuery：JavaScript 框架，业界事实的标准。http:/ Masonry：制作瀑布流布局的 JavaScript 库。http:/ imagesLoad：监测图片是否加载完毕的 Ja
3、vaScript 库。https:/ Lightbox：以弹框形式集中展示图片的 JavaScript 库。http:/ Bootstrap 打底首先为每个案例准备 1-2 张截图、案例名称以及案例作者，并创建简单的 HTML 布局如下：简单 OA 管理系统 by 小小生 为 HTML 元素定义简单的 CSS 样式：#masonry padding: 0; min-height: 450px; margin: 0 auto; #masonry .thumbnail width: 330px; margin: 20px; padding: 0; border-width: 1px; -webki
4、t-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 .t
5、itle font-size: 13px; font-weight: bold; margin: 5px 0; text-align: left; #masonry .thumbnail .caption .author font-size: 11px; text-align: right; 此时的页面看起来如下图所示（源代码在 index_1.html 中，文章最后会提供下载地址）。 用 Masonry+imagesLoaded 创建瀑布流由于列表中包含图片，我们需要所有图片加载完毕后再调用 Masonry 的瀑布流布局，从而方式列表中的元素重叠在一起。为上述页面添加如下简单的 JavaSc
6、ript 代码。 $(function() var masonryNode = $(#masonry); masonryNode.imagesLoaded(function() masonryNode.masonry( itemSelector: .thumbnail, isFitWidth: true ); ); ); 此时页面显示效果如下图所示（源代码在 index_2.html 中，文章最后会提供下载地址）。手工创建随机序列和延迟加载效果如果图省事，上面就已经完成了全部的工作，页面已经创建出来了，瀑布流效果看起来还不错。不过程序员一定要精益求精，我们还要认真考虑如下两个问题：1. 目前有
7、 35 个案例，每个案例有 1-2 张图片，要等这 80 几张图片全部加载完毕再生成瀑布流，需要的时间会很长；2. 由于这些案例都是平级的，我们不能手工引入顺序，所以需要随机显示。针对第一个问题，Masonry 幸好有相应的 appended 方法，来在现有的瀑布流布局基础上添加新的元素，而不会影响已经存在的布局，其调用方法如下所示。/ 首先将新元素添加到页面容器中masonryNode.append(newItems); / 等待新元素中的图片加载完毕 newItems.imagesLoaded(function()/ 调用瀑布流布局的 appended 方法 masonryNode.mas
8、onry(appended, newItems); );那么在什么时间调用呢？上一篇文章 纯手工打造漂亮的垂直时间轴，使用最简单的 HTML+CSS+JQUERY 完成 100 个版本更新记录的华丽转身！已经给出了相应的代码，在页面的滚动条滚动到页面底部时加入新的元素。$(window).scroll(function() if($(document).height() - $(window).height() - $(document).scrollTop() 0.5) return a - b; else return b - a; );JavaScript 数组的 sort 方法接受一个
9、函数，在函数内部决定两个需要比较对象的大小，我么使用 Math.random 来生成一个 0-1 的随机数来和 0.5 比较，从而使得两个需要比较的对象大小也是随机的。注：特别需要注意，由于隐藏在 DIV 中的图片还是会在页面打开时加载，我们需要先将 img 标签改为 inputtype=hidden 标签，并在需要的时候还原成 img 标签。也即是将 替换为 。此时页面显示效果如下图所示（源代码在 index_3.html 中，文章最后会提供下载地址）。 注意，此时页面中典型案例的顺序已经是随机的了，并且当页面滚动条靠近底部时会自动加载剩余的列表。Lightbox 为页面增色由于瀑布流展示的
10、图片比较小，最后我们还需要 Lightbox 为页面增色，调用代码非常简单，只需要修改 img 标签即可。将修改为：注：Lightbox 和 Bootstrap 有点冲突，导致 Lightbox 不能正常显示弹出框中的图片，我们还需要在 CSS 中加入如下代码。.lightbox .lb-image max-width: none; 使用 Lightbox 后的效果（源代码在 index.html 中，文章最后会提供下载地址）。此时，我们已经可以在全部的图片（是大图哦）中导航，效果很赞！最终效果快来体验一把： http:/ http:/ Web 前端工程师已经非常幸福了，你看 IE6 已死，IE7/8 也蹦弹不了几天，还有那么多优秀的 CSS、JavaScript 框架供我们使用。而大部分时候我们的也没必要从头做起（做学习研究除外），站在巨人的肩膀上，省时省工，而且效果更好！
