基于jQuery图片元素网格布局插件

时间：2021-01-06 15:13:46

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

基于jQuery图片元素网格布局插件

在线预览   源码下载

实现的代码。

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:; margin:;}

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:; background: #eee; border-radius: 3px; display: block; overflow: auto;}

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

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

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

相关文章