图片集合，可用作商品列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超炫的照片墙展示效果jquery特效 - 懒人素材</title>
<link rel="stylesheet" type="text/css" href="http://demo.lanrenzhijia.com/demo/2013/0310/pic/css/lanrenzhijia.css" media="screen"/>
<script type="text/javascript" src="http://demo.lanrenzhijia.com/demo/2013/0310/pic/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://demo.lanrenzhijia.com/demo/2013/0310/pic/js/jquery.gridAccordion.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.accordion').gridAccordion({width:960,
height:680,
columns:5,
distance:2,
closedPanelWidth:10,
closedPanelHeight:10,
alignType:'centerCenter',
slideshow:true,
panelProperties:{
0:{captionWidth:200, captionHeight:35, captionTop:30, captionLeft:30},
4:{captionWidth:150, captionHeight:100, captionTop:30, captionLeft:650},
7:{captionWidth:310, captionHeight:35, captionTop:350, captionLeft:40},
8:{captionWidth:300, captionHeight:40, captionTop:150, captionLeft:35},
11:{captionWidth:150, captionHeight:120, captionTop:300, captionLeft:30},
14:{captionWidth:300, captionHeight:40, captionTop:30, captionLeft:50},
16:{captionWidth:150, captionHeight:120, captionTop:150, captionLeft:10},
18:{captionWidth:300, captionHeight:40, captionTop:130, captionLeft:50}
}});
});
</script>
</head>
<body>
<style>
body{ padding-top:100px;}
.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; top:0; margin-left:-480px; overflow:hidden;}
</style>
<ul class="accordion">
<li> <img src="http://gtms02.alicdn.com/tps/i2/TB1PTo2GXXXXXaxaXXXSYoGNVXX-400-422.jpg" alt="懒人之家"/>
<div class="caption">This is just a simple caption.</div>
</li>
<li> <img src="http://gtms01.alicdn.com/tps/i1/TB1AZYHGXXXXXcnaXXXSYoGNVXX-400-422.jpg" alt="懒人之家"/> </li>
<li> <img src="http://gtms01.alicdn.com/tps/i1/TB1iMtSGFXXXXbdXVXXSYoGNVXX-400-422.jpg" alt="懒人之家"/> </li>
<li> <img src="http://gtms03.alicdn.com/tps/i3/TB1GOhjGFXXXXc9XVXXSYoGNVXX-400-422.jpg" alt="懒人之家"/> </li>
<li> <img src="http://gtms01.alicdn.com/tps/i1/TB17T3jGpXXXXXiaFXXSYoGNVXX-400-422.jpg" alt="懒人之家"/>
<div class="caption"><u>Title</u><br/>
<br/>
This is a list of items:
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</li>
<li> <img src="http://gtms03.alicdn.com/tps/i3/TB12n2qGpXXXXbIaXXXSYoGNVXX-400-422.jpg" alt="懒人之家"/> </li>
<li> <img src="http://gtms01.alicdn.com/tps/i1/TB1xsNeGpXXXXcaaXXXSYoGNVXX-400-422.jpg" alt="懒人之家"/> </li>
<li> <img src="http://gtms02.alicdn.com/tps/i2/TB1SOwfGpXXXXcpapXXSYoGNVXX-400-422.jpg" alt="懒人之家"/>
<div class="caption">Captions can have any position and any size.</div>
</li>
<li> <img src="images/image9.jpg" alt="懒人之家"/>
<div class="caption">Add <b>HTML</b> elements like <a href="http://www.lanrenzhijia.com">links</a> or
<input type="button" value="Buttons"/>
</div>
</li>
<li> <img src="http://gtms02.alicdn.com/tps/i2/TB1YgTOGpXXXXckapXXSYoGNVXX-400-422.jpg" alt="懒人之家"/> </li>
<li> <img src="http://gtms03.alicdn.com/tps/i3/TB1U906FVXXXXcLaXXXfelZ2VXX-399-422.jpg" alt="懒人之家"/> </li>
<li> <img src="http://img04.taobaocdn.com/imgextra/i4/297277216/TB2gw8obXXXXXXMXpXXXXXXXXXX_!!297277216.jpg" alt="懒人之家"/>
<div class="caption"><u>Title</u><br/>
<br/>
This is a list of items:
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</li>
<li> <img src="images/image13.jpg" alt="懒人之家"/> </li>
<li> <img src="images/image14.jpg" alt="懒人之家"/> </li>
<li> <img src="images/image15.jpg" alt="懒人之家"/>
<div class="caption">Add <b>HTML</b> elements like <a href="http://lanrenzhijia.com">links</a> or
<input type="button" value="Buttons"/>
</div>
</li>
<li> <img src="images/image16.jpg" alt="懒人之家"/> </li>
<li> <img src="images/image17.jpg" alt="懒人之家"/>
<div class="caption"><u>Title</u><br/>
<br/>
This is a list of items:
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</li>
<li> <img src="images/image18.jpg" alt="懒人之家"/> </li>
<li> <img src="images/image19.jpg" alt="懒人之家"/>
<div class="caption">Add <b>HTML</b> elements like <a href="http://www.lanrenzhijia.com">懒人之家</a> or
<input type="button" value="Buttons"/>
</div>
</li>
<li> <img src="images/image20.jpg" alt="懒人之家"/> </li>
</ul>
</body>
</html>
出处：http://bober.cnblogs.com/
CARE健康网: http://www.aicareyou.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
