打造漂亮的图片列表瀑布流.docVIP

前言 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框架，业界事实的标准。/ 3. Masonry：制作瀑布流布局的JavaScript库。/ 4. imagesLoad：监测图片是否加载完毕的JavaScript库。/desandro/imagesloaded 5. Lightbox：以弹框形式集中展示图片的JavaScript库。/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=/bbs/home.php?mod=spaceuid=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; }