图片瀑布流

前言

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框架供我们使用。而大部分时候我们的也没必要从头做起（做学习研究除外），站在巨人的肩膀上，省时省工，而且效果更好！

时间： 2024-08-09 00:31:06

图片瀑布流的相关文章

代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

ios图片瀑布流代码

ios瀑布流,实现简单的瀑布流视图布局,可以显示网络图片,下拉刷新,上拉加载更多. 下载:http://www.huiyi8.com/sc/9087.html ios图片瀑布流代码,布布扣,bubuko.com

js图片瀑布流

一个简单的图片瀑布流 首先准备一个html文件,css用到很少,所以写在html里,还需要一个js文件及几张图片(分辨率随意) html的代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { margin: 0px; padding: 0px;

利用LruCache和DiskLruCache加载网络图片实现图片瀑布流效果(升级版)

MainActivity如下: package cc.patience7; import android.os.Bundle; import android.app.Activity; /** * Demo描述: * 采用瀑布流的形式加载大量网络图片 * 详细分析参见WaterfallScrollView * * 更新说明: * 在原本的的基础上添加了本地缓存DiskLruCache * * 所以在该示例中对于图片的缓存采用了:LruCache + DiskLruCache 的技术 * * 参考

利用LruCache加载网络图片实现图片瀑布流效果(改进版)

MainActivity如下: package cc.patience4; import cc.patience4.R; import android.os.Bundle; import android.app.Activity; /** * Demo描述: * 采用瀑布流的形式加载大量网络图片 * 详细分析参见WaterfallScrollView * * 更新说明: * 该示例在基础版的基础上加入了图片查看功能. * 点击瀑布流中一张图片后可欣赏图片并能对图片进行单指拖动和两指缩放. * 对

ajax抓取网站接口图片瀑布流笔记

用php结合ajax来实现去其它网站抓取图片,在自己本地用! ajax代码部分 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>图片瀑布流</title> </head> <style>     body{         margin:0;     }    #u

jQuery+HTML5图片瀑布流效果

JavaScript与HTML5实现美女瀑布流布局,本方法是把图片的路径写在了JS的数组里,不过重点好像不是在这里,而是在图片如何自动排列的问题,你可以运行本实例后,点击“加载瀑布流布局”按钮,即可看到图片的瀑布流排列效果,现在很流行这个,希望您从本代码中能找到一些灵感. <!DOCTYPE HTML> <html> <head> <title>jQuery+HTML5图片瀑布流效果丨河北电动叉车|石家庄苗木</title> <style

利用LruCache加载网络图片实现图片瀑布流效果(基础版)

MainActivity如下: package cc.patience3; import android.os.Bundle; import android.app.Activity; /** * Demo描述: * 采用瀑布流的形式加载大量网络图片 * 详细分析参见WaterfallScrollView * * 参考资料: * 1 http://blog.csdn.net/guolin_blog/article/details/10470797 * 2 http://blog.csdn.net

JS图片瀑布流制作

这里为大家带来了两种通过js制作图片瀑布流的方法. 一.绝对定位法 计算每个元素的绝对位置进行设置. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

【jQuery Demo】图片瀑布流实现

瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest.美丽说.蘑菇街这类型的网站. 下面是效果: 核心内容: 1.先设置布局,主要HTML代码如下 <div id="container"> <div class="box"> <div class="co