瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
前两天写的文章《纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!》受到很多网友的喜爱,今天特别推出姊妹篇《纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!》,希望大家喜欢!
前言
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框架,业界事实的标准。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" > </ 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" 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框架供我们使用。而大部分时候我们的也没必要从头做起(做学习研究除外),站在巨人的肩膀上,省时省工,而且效果更好!
喜欢这篇文章,请帮忙点击页面右下角的【推荐】按钮。
瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!的更多相关文章
- 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- [置顶] 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...
- 分享一个Vue实现图片水平瀑布流的插件
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久以前写的一篇文章<JS两 ...
- 用 jQuery Masonry 插件创建瀑布流式的页面(转)
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
- 用 jQuery Masonry 插件创建瀑布流式的页面
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
- thinkPHP实现瀑布流的方法
thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 时间:2014-11-29来源:www.aspku.com 作者:源码库 文章热度: 131 ℃ 过期已备案域名,注册就能用!终 ...
- jQuery实现瀑布流(pc、移动通用)
使用 jQuery 的 Masonry 插件来实现这种页面形式 1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src=" ...
- android 瀑布流
我们还是来看一款示例: 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此.就如我们的方角图形,斯通见惯后也就出现了圆角.下面我简单介绍下实现 ...
- JavaScript:实现瀑布流
一.前言: 瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等. 二.流程: 1.在html文件中写出布局的元素内容: 2.在css文件中整体对每一个必要的元素进行样式和浮动 ...
随机推荐
- java中IO写文件工具类
以下是一些依据经常使用java类进行组装的对文件进行操作的类,平时,我更喜欢使用Jodd.io中提供的一些对文件的操作类,里面的方法写的简单易懂. 当中jodd中提供的JavaUtil类中提供的方法足 ...
- 怎样下载并编译Android4.0内核源代码goldfish(图文)
关于怎样下载Android4.0源代码,请查看我的博客内还有一篇文章(相同是图文教程): http://blog.csdn.net/flydream0/article/details/7036156 ...
- getch()和getchar()之再讨论
原文:getch()和getchar()之再讨论 在C语言的字符处理函数中,getch()和getchar()是经常让人迷惑的两个函数,他们都有一些“奇怪的”特点让初学者摸不着头脑.两个函数有很多相似 ...
- thrift实现js与C#通讯
利用thrift实现js与C#通讯的实例代码 1.为什么要用thrift js C#? 1.1 首先,js 通过 thrift 访问C#,实际上是一种c/s模式.thrift是通信工具,js是客户端, ...
- AngularJS html5Mode与ASP.NET MVC路由
AngularJS html5Mode与ASP.NET MVC路由共存 前言 很久之前便听说AngularJS,非常酷,最近也比较火,我也在持续关注这个技术,只是没有认真投入学习.前不久公司找我们部门 ...
- Android NDK进入发展
使用互联网有很多javah命令生成一个头文件来完成JNI写,但事实上ADT集成NDK后.点点鼠标就可以了,网上的介绍是非常小懒的方法,在这里,我们主要谈论的懒惰JNI发展. 为ADT组态NDK.请个人 ...
- java 转成字符串 json 数组和迭代
当你需要转成一串一串的json 排列 .当内容和遍历它们. 首页进口 net.sf.json.JSONArray和net.sf.json.JSONObject 两个jar 包 String str = ...
- IntelliJ IDEA 13 破解安装(JRebel 5.6.3a皴)
首先安装IntelliJ 13,记住下载Ultimate Edition版本号,否则就必须打破.. 安装到本地.然后一些配置(这一步不能.不过考虑到交换系统后,保存,建议做) 打开{install ...
- c#登录时保存账号密码到cookie
登陆界面有用户名.密码输入框,一个’记住账号密码‘的复选框. 1.登录时,勾选‘记住账号密码‘复选框,则会把用户名密码保存在客户端cookie里,保存时间为最大值(直到用户清除浏览器缓存或者取消勾选’ ...
- OCP-1Z0-051-题目解析-第11题
11. View the Exhibit and examine the structure of the PRODUCTS table.All products have a list price. ...