jQuery非对称瀑布流动画网格插件Flex

一款jQuery非对称瀑布流动画的网格插件Flex，jquery.flex图片墙采用了非对称的网格布局，鼠标悬停在每个图片上面的时候，有一个随机伸展放大的效果，鼠标离开则收缩恢复至初始状态。

分类：图片代码 > 图片墙难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入样式文件bootstrap.min.css，并设置好页面元素的样式，代码如下：

<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
body {background-color:#CCC;font-family:Verdana;}
.flex {position:relative;width:850px;min-height:300px;margin:0 auto;border:0px solid red;margin-top:10px;}
.flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;border:3px solid white;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;text-decoration:none;}
[bg=a] {background-image:url(images/6448917381_0b754e86fb_z.jpg);}
[bg=b] {background-image:url(images/7362866426_bf285ebd45.jpg);background-size:300px auto;}
[bg=c] {background-image:url(images/7410370290_0935419fc3.jpg);}
[bg=d] {background-image:url(images/7419245080_bb752ed1d6.jpg);}
[bg=e] {background-image:url(images/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
[bg=f] {background-image:url(images/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
[bg=g] {background-image:url(images/7322604950_348c535903.jpg);background-size:auto 200px;}
[bg=h] {background-image:url(images/7286717012_6e6b450243.jpg);}
[bg=i] {background-image:url(images/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
[bg=j] {background-image:url(images/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
[bg=k] {background-image:url(images/7269592732_c4b7918626.jpg);background-size:auto 280px;}
h1, h3 {width:850px;font-weight:normal;margin:0 auto;}
h1 {margin-top:100px;}
h3 {color:#666;margin-top:5px;}
p {width:850px;margin:0;padding:0;margin:0 auto;font-size:14px;color:black;margin-top:0px;margin-bottom:20px;color:#989898;}
#buttons {height:75px;width:850px;margin:0 auto;margin-top:10px;}
#buttons a {float:left}
.marginleft {margin-left:25px;}
</style>

接着引入jQuery库和jquery.flex插件，并启用插件，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flex.js"></script>
<script type="text/javascript">
$(function() {
    $(".flex").flex();
});
</script>

页面的body部分，div容器里放入了多个a标签来显示不同图片，代码如下：

<div class="flex">
	<a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="350" height="275">A</a>
	<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
	<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
	<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
	<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
	<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
	<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="225" height="150">G</a>
	<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
	<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="250" height="140">I</a>
	<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
	<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a>
</div>