基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<center><h3>演示1</h3></center>
<div class="pictures">
	<img src="img/pics-001.jpg" width="600" height="519">
	<img src="img/pics-002.jpg" width="400" height="327">
	<img src="img/pics-003.jpg" width="350" height="473">
	<img src="img/pics-004.jpg" width="600" height="529">
	<img src="img/pics-005.jpg" width="350" height="472">
	<img src="img/pics-006.jpg" width="700" height="467">
	<img src="img/pics-007.jpg" width="600" height="573">
	<img src="img/pics-008.jpg" width="500" height="669">
	<img src="img/pics-009.jpg" width="460" height="1635">
	<img src="img/pics-010.jpg" width="440" height="321">
	<img src="img/pics-011.jpg" width="600" height="533">
	<img src="img/pics-012.jpg" width="440" height="440">
	<img src="img/pics-013.jpg" width="600" height="823">
</div>
<br>
<center><h3>演示2</h3></center>
<ul class="blocks">
	<li style="width: 250px; height: 400px; background: #ff0000; list-style: none;"></li>
	<li style="width: 250px; height: 200px; background: #ffff00; list-style: none;"></li>
	<li style="width: 450px; height: 235px; background: #000000; list-style: none;"></li>
	<li style="width: 550px; height: 500px; background: #00ff00; list-style: none;"></li>
	<li style="width: 700px; height: 300px; background: #00ffff; list-style: none;"></li>
	<li style="width: 213px; height: 458px; background: #ff00ff; list-style: none;"></li>
	<li style="width: 710px; height: 170px; background: #aa77cc; list-style: none;"></li>
	<li style="width: 350px; height: 350px; background: #bb1100; list-style: none;"></li>
	<li style="width: 250px; height: 400px; background: #ff0000; list-style: none;"></li>
</ul>

css代码：

body, html {padding: 0; margin: 0;}
a {color: #3366CC;}
.wrapper {width:900px; margin: 0 auto; font: normal normal 400 100%/1.5em georgia, serif; color: #222;}
.wrapper h1 {font: normal 600%/100% georgia, serif; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); margin: 0 0 5px 0; text-align: center;}
.wrapper h2 {font: normal 200%/100% georgia, serif; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); margin: 0 0 5px 0; text-transform: uppercase; }
.wrapper h3 {font: normal 150%/100% georgia, serif; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); margin: 0 0 5px 0;}
.wrapper hr {border: none; border-top: 1px solid #ddd;}
.head p {font: normal 145%/1em georgia, serif; text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01); text-align: center;}
.buttons a {display: inline-block;  background: #ddd; color: #111; width: 39.5%; margin: 0 5%; border-radius: 3px; text-align: center; line-height: 2.6em; text-decoration: none;}
.buttons a:hover {background: #3366CC; color: #fff;}
.buttons { clear: both; margin: 5px 0px 20px 0px; }
.wrapper pre {font: normal 87.5%/1.2em monospace, sans-serif; padding: 15px 30px 0px 30px; margin: 0; background: #eee; border-radius: 3px; display: block; overflow: auto;}

.pictures {margin: 0px auto; width: 870px; padding: 0;}
.blocks {margin: 0px auto; width: 70%; padding: 0;}

via：http://www.w2bc.com/Article/43290

在线预览    源码下载