您的位置：百味书屋 > 范文大全 > 经典范文 > jquery代码实现简单的随机图片瀑布流效果正文

jquery代码实现简单的随机图片瀑布流效果

2017-01-18 06:13:51 来源网站：百味书屋

篇一：打造漂亮的图片列表瀑布流

前言

发展至今已经有 5 个年头，目前论坛注册的QQ会员 5000 多人，捐赠用户 500 多人（捐赠用户转化率达到10%以上，在国内开源领域相信这是一个梦幻数字！也足以证明FineUI旺盛的生命力！）。在这 5 年七年，FineUI总共发布了 100 多个版本！也积攒了大量的典型案例。

然而一直以来，FineUI的典型案例都是在论坛上以帖子的形式进行展示，没有一个集中展示的地方。今天我们就使用前段时间比较流行的瀑布流来解决FineUI典型案例的展示问题。最终的显示效果如下图所示。

五大插件简介

为了制作FineUI的《典型案例》页面，我们综合运用了Bootstrap+jQuery+Masoy+imagesLoaded+Lightbox五大插件，下面先对这 5 个插件进行简单的介绍。

1. Bootstrap：强大的CSS框架，由Twitter的开发工程师推出，不仅仅是960布局，而且包含很多很多拿来就用的漂亮样式。从Bootstrap推出第一个版本作者就开始使用，http://t

2. jQuery：JavaScript框架，业界事实的标准。

3. Masoy：制作瀑布流布局的JavaScript库。

4. imagesLoad：监测图片是否加载完毕的JavaScript库。

5. Lightbox：以弹框形式集中展示图片的JavaScript库。

用Bootstrap打底

首先为每个案例准备1-2张截图、案例名称以及案例作者，并创建简单的HTML布局如下： <div id="masoy" class="container-fluid">

</div>

<div class="title">简单OA管理系统</div>

</div>

by <a target="_blank" href="http://fineui.com/bbs/home.php?mod=space&uid=2426">小小生</a>

</div>

为HTML元素定义简单的CSS样式：

<style>

#masoy

{

padding: 0;

min-height: 450px;

margin: 0 auto;

}

#masoy .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);}

#masoy .thumbnail .imgs

{

padding: 10px;

}

#masoy .thumbnail .imgs img

{

margin-bottom: 5px;

}

#masoy .thumbnail .caption

{

background-color: #fff;

padding-top: 0;

font-size: 13px;

}

#masoy .thumbnail .caption .title

{

font-size: 13px;

font-weight: bold;

margin: 5px 0;

text-align: left;

}

#masoy .thumbnail .caption .author

{

font-size: 11px;

text-align: right;

}

</style>

此时的页面看起来如下图所示（源代码在 index_1.html 中，文章最后会提供下载地址）。

用Masoy+imagesLoaded创建瀑布流

由于列表中包含图片，我们需要所有图片加载完毕后再调用Masoy的瀑布流布局，从而方式列表中的元素重叠在一起。为上述页面添加如下简单的JavaScript代码。

$(function() {

var masoyNode = $('#masoy');

masoyNode.imagesLoaded(function(){

masoyNode.masoy({

itemSelector: '.thumbnail',

isFitWidth: true

});

</script>

此时页面显示效果如下图所示（源代码在 index_2.html 中，文章最后会提供下载地址）。

手工创建随机序列和延迟加载效果

篇二：Jquery瀑布流布局

<!doctype html> <html> <head>

<title>Jquery瀑布流布局（每行代码都有详细注释）-作者：刘晓帆</title>

/*瀑布流布局样式*/#lxf-box { position: relative; }

#lxf-box li { position: absolute; background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; left: 0px; top: 0; } h3 { padding-top: 8px; }

img { width: 200px; height: auto; display: block; border: 0 }

/*css3动画*/li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s } </style> <script </head> <body>

<ul id="lxf-box"><li><a

<h3>图片标题</h3></li><li><a

href="/"><img

src="/demo/waterfall/rSmEiZGlAvvuZ.jpg"></a>

href="/"><img

src="/demo/waterfall/rabGVkIGq.jpg"></a>

href="/"><img

src="/demo/waterfall/WbWXwqpcxqcued.jpg"></a>

href="/"><img

src="/demo/waterfall/msbvKWyQQzZuZy.jpg"></a>

href="/"><img

src="/demo/waterfall/OLqypfV.jpg"></a>

src="http://liuxiaofan.com/demo/js/jquery-1.6.4.min.js"

type="text/javascript"></script>

<h3>图片标题</h3></li><li><a

src="/demo/waterfall/YewRtz.jpg"></a>

href="/"><img

src="/demo/waterfall/STVDndiZsIduZyLv.jpg"></a>

href="/"><img

src="/demo/waterfall/mWFuVrzCzpPdzdje.jpg"></a>

href="/"><img

src="/demo/waterfall/MsZvAyOFukxdzdjefXwi.jpg"></a>

href="/"><img

src="/demo/waterfall/OEycuedk.jpg"></a>

href="/"><img

src="/demo/waterfall/YwabRquVKrxd.jpg"></a>

href="/"><img

src="/demo/waterfall/+nwbuJpc.jpg"></a>

href="/"><img

src="/demo/waterfall/qymffF.jpg"></a>

href="/"><img

src="/demo/waterfall/DvKZdxCjtfqMv.jpg"></a>

href="/"><img

src="/demo/waterfall/SOmyOQZtlUfdzdjefXwi.jpg"></a>

href="/"><img

src="/demo/waterfall/REsUNXUvAkrdzdj.jpg"></a>

<h3>图片标题</h3></li><li><a

src="/demo/waterfall/DQJwrFnDpgtdz.jpg"></a>

href="/"><img

src="/demo/waterfall/eJupzWlGPxz.jpg"></a>

href="/"><img

src="/demo/waterfall/IWpjipjp.jpg"></a>

href="/"><img

src="/demo/waterfall/OXsDgKacJeTdzdjefXwi.jpg"></a>

href="/"><img

src="/demo/waterfall/QPIzxiMkmlHdzdjefX.jpg"></a>

href="/"><img

src="/demo/waterfall/mrTNaJTaQyluZyLvvnWS.jpg"></a>

href="/"><img

src="/demo/waterfall/mqXLNuWiPrbdz.jpg"></a>

href="/"><img

src="/demo/waterfall/MiEJRJdimxPdzdjefXw.jpg"></a>

href="/"><img

src="/demo/waterfall/CczowVxqM.jpg"></a>

href="/"><img

src="/demo/waterfall/rabGVkIGq.jpg"></a>

href="/"><img

src="/demo/waterfall/zwPqjasxHYvdz.jpg"></a>

/*原理：1.把所有的li的高度值放到数组里面2.第一行的top都为0

3.计算高度值最小的值是哪个li4.把接下来的li放到那个li的下面作者：刘晓帆

博客地址：[url]http://liuxiaofan.com[/url] 编写时间：2012年6月9日 */

var margin = 10;//这里设置间距 var li=$("li");//这里是区块名称

var li_W = li[0].offsetWidth+margin;//取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）

function liuxiaofan(){//定义成函数便于调用 var h=[];//记录区块高度的数组

var n = document.documentElement.offsetWidth/li_W|0;//窗口的宽度除以区块宽度就是一行能放几个区块

for(var i = 0;i < li.length;i++) {//有多少个li就循环多少次li_H = li[i].offsetHeight;//获取每个li的高度if(i < n) {//n是一行最多的li，所以小于n就是第一行了 h[i]=li_H;//把每个li放到数组里面

li.eq(i).css("top",0);//第一行的Li的top值为0

li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度 }else{

min_H =Math.min.apply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个

minKey = getarraykey(h, min_H);//最小的值对应的指针 h[minKey] += li_H+margin ;//加上新高度后更新高度值

li.eq(i).css("top",min_H+margin);//先得到高度最小的Li，然后把接下来的li放到它的下面

li.eq(i).css("left",minKey * li_W); //第i个li的左坐标就是i*li的宽度}

$("h3").eq(i).text("编号："+i+"，高度："+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面 } }

/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}

/*这里一定要用onload，因为图片不加载完就不知道高度值*/window.onload = function() {liuxiaofan();};

/*浏览器窗口改变时也运行函数

*/window.oesize = function() {liuxiaofan();}; </script> </body> </html>

篇三：jquery瀑布流布局(masoy.js)===

引用插件实例：

img { border:none; }

.wrapper { width:1000px; margin:0 auto; }

.wrapper

h3{color:#3366cc;font-size:16px;height:35px;line-height:1.9;text-align:center;border-bottom:1px solid #E5E5E5;margin:0 0 10px 0;}

#con1_1 { position:relative; }

#con1_1 .product_list { position:absolute; left:0px; top:0px; padding:10px; background:#eee; margin:5px;}

.product_list img { width:200px;}

.product_list p { padding:5px 0px; font-size:12px; text-align:center; color:#333; white-space:normal; width:200px;}

</style>

<h3>瀑布流实例</h3>