前言
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 (){
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
分享到:
相关推荐
基于JSP+Servlet+BootStrap+Jquery的图书管理系统 基于JSP+Servlet+BootStrap+Jquery的图书管理系统 基于JSP+Servlet+BootStrap+Jquery的图书管理系统 基于JSP+Servlet+BootStrap+Jquery的图书管理系统 基于JSP+...
纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
Java毕设:考评系统,采用springboot+bootstrap+jquery Java毕设:考评系统,采用springboot+bootstrap+jquery Java毕设:考评系统,采用springboot+bootstrap+jquery Java毕设:考评系统,采用springboot+bootstrap...
本科毕设项目,基于springboot+mybatis+html+bootstrap+jquery的请假审批与管理系统。项目经过测试,可完美运行! 本科毕设项目,基于springboot+mybatis+html+bootstrap+jquery的请假审批与管理系统。项目经过测试...
2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于...
网上零食商城(ssm+bootstrap+jquery+AngularJs+EasyUI)
ssm+bootstrap+jquery实例,博客地址是https://blog.csdn.net/u014627099/article/details/85040765,是完全对应的,可放心食用
这是一款bootstrap+jQuery的前端分页展示,通过获取后台的数据,来展示不同的分页效果,易理解,可改造
Java开发基于springboot+bootstrap+jquery的考评系统源码.zipJava开发基于springboot+bootstrap+jquery的考评系统源码.zipJava开发基于springboot+bootstrap+jquery的考评系统源码.zipJava开发基于springboot+...
PHP+MYSQL入门学习并实现后端增删改查,bootstrap实现后端页面;前端有ajax请求json格式数据,jquery动态创建元素等
基于Springmvc+Spring+Mybatis+Bootstrap+jQuery +MySql教务管理系统(分为PC端和手机端),内容很完美。
bootstrap+masonry实现瀑布流 交流学习使用 原作者地址忘记了 参考学习
jquery+bootstrap+echarts数据可视化大屏展示特效实例 项目描述: 数据可视化大屏展示用的越来越多,自己也捣鼓做一个。 运行环境: Chrome 项目技术(必填): jquery+bootstrap+echarts
Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统,免责声明,朋友分享,切勿商用
系统后端基于SpringMVC+Spring+Hibernate框架,前端页面采用JQuery+Bootstrap等主流技术; 流程引擎基于Snaker工作流;表单设计器基于雷劈网WEB表单设计器。 系统主要功能有: >1.系统管理 >>系统管理包含有:基础...
旅游趋势大屏 框架:Python + html + css + jquery + bootstrap + json 数据库:无 数据集基于json接口的形式获取。 角色管理员 admin 123456 模块介绍 登录模块 大屏模块 数据库设计:无数据库
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
自己电脑需要安装mongodb数据库 和mongoose ,自己在用的时候,记得要和对应数据库和表名一致
项目描述:基于 servlet 开发的系统 ...责任描述:从前端美工到后台都在老师的帮助下努力完成 项目总结:从项目中学会用 bootstrap 框架对前端页面进行快速搭建,熟悉了 mvc 开发流程,掌握了 JAVAEE 模式开
bootstrap+jQuery整站模板,响应式,适配移动端