纯手工打造漂亮的瀑布流,五大插件一个都不少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">
                by <a target="_blank" href="http://fineui.com/bbs/home.php?mod=space&uid=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;
    }
    #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框架供我们使用。而大部分时候我们的也没必要从头做起(做学习研究除外),站在巨人的肩膀上,省时省工,而且效果更好!

喜欢这篇文章,请帮忙点击页面右下角的【推荐】按钮。

 
 
分类: ExtjsFineUIJavascriptjQuery

瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!的更多相关文章

  1. 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  2. [置顶] 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  3. 分享一个Vue实现图片水平瀑布流的插件

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久以前写的一篇文章<JS两 ...

  4. 用 jQuery Masonry 插件创建瀑布流式的页面(转)

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  5. 用 jQuery Masonry 插件创建瀑布流式的页面

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  6. thinkPHP实现瀑布流的方法

    thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 时间:2014-11-29来源:www.aspku.com 作者:源码库 文章热度: 131 ℃ 过期已备案域名,注册就能用!终 ...

  7. jQuery实现瀑布流(pc、移动通用)

    使用 jQuery 的 Masonry 插件来实现这种页面形式 1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src=" ...

  8. android 瀑布流

    我们还是来看一款示例: 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此.就如我们的方角图形,斯通见惯后也就出现了圆角.下面我简单介绍下实现 ...

  9. JavaScript:实现瀑布流

    一.前言: 瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等. 二.流程: 1.在html文件中写出布局的元素内容: 2.在css文件中整体对每一个必要的元素进行样式和浮动 ...

随机推荐

  1. TRIZ系列-创新原理-28-替代机械系统原理

    替代机械系统原理的详细描写叙述例如以下:1)用光.声.热.嗅觉系统替代机械系统:2)用电.磁或电磁场来与物体交互作用:3)用移动场替代精巧场,用随时间变化的场替代固定场,用结构化的场替代随机场:4)使 ...

  2. 怎样选择PHP的版本

    原文:怎样选择PHP的版本 IIS 如果想使用IIS配置PHP的话,那么需要选择Non-Thread Safe(NTS)版本的PHP Apache 如果你是用的Apache的版本来自Apache Lo ...

  3. Hadoop-2.4.1完全分布式环境搭建

      Hadoop-2.4.1完全分布式环境搭建   Hadoop-2.4.1完全分布式环境搭建 一.配置步骤如下: 主机环境搭建,这里是使用了5台虚拟机,在ubuntu 13系统上进行搭建hadoop ...

  4. 使用SQL Server Driver for PHP解决PHP连接MSSQL乱码的问题

    原文 使用SQL Server Driver for PHP解决PHP连接MSSQL乱码的问题 最近帮客户写了一个.net商城网站的发布接口,大家都知道.net一般都使用MSSQL数据库,但鱼丸不会. ...

  5. 高德地图教程_poi搜索和显示

    通过高仿深圳的应用近期打算.UI我们已经做了,我见过APP查询界面.关闭网络也将是能够查询其指示数据被存储在数据库中,或者是第一网络,所有网站上的数据是好了.我想简单地使用查询地图提供了. 曾经是接触 ...

  6. Nancy和MVC的简单对比

    Nancy和MVC的简单对比 在上一篇的.NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy中,简单介绍了Nancy,并写了一个Hello,world.看到大家的评论,都在问Nancy ...

  7. 快速构建Windows 8风格应用31-构建磁贴

    原文:快速构建Windows 8风格应用31-构建磁贴 引言 磁贴是吸引用户经常使用应用重要手段之一.我们可将应用程序内较好的内容使用磁贴进行展示. 另外应用程序磁贴是应用程序中的核心部分,而且很可能 ...

  8. php soap调用asp.net webservice

    原文:php soap调用asp.net webservice 首先做一下准备工作,找到安装环境里的php.ini把;extension=php_soap.dll去掉前面的;.我这里使用的是wamp, ...

  9. android ListView隐藏FooterView(headerView)

    安卓开发.正在使用listView时间,我们经常使用的footerView要么headerView 给ListView添加footer和header很多时间.它会基于隐藏和显示的情况下. 因为foot ...

  10. List environment variables from Command Prompt

    Request: List the environment variables from Command Promt To list one varibales , the syntax is lik ...