你的位置:首页 > Java教程

[Java教程]基于jQuery图片元素网格布局插件


基于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