Masonry 是用于网页布局的一个插件,可以将不同高度的div去除空白,是页面更整洁!

如下图:

Masonry  jQuery 布局插件 详解-魏星博客Masonry  jQuery 布局插件 详解-魏星博客

看到上面的官网截图了吗,masonry可以将div的空白去掉,美化布局!

使用方法很简单,只要调用一下所要布局的标签就OK了。

如下代码:

<div id="test">

<div class="box"> test1</div>

<div class="box"> test2</div>

<divclass="box"> test3</div>

<divclass="box"> test4</div>

</div>

<script type="text/javascript" language="javascript">
$('#test').masonry({
singleMode: true,
itemSelector: '.box'
})

</script>

明白了,就这么简单,还有更多的效果、参数,请参见官网!

使用详细解释:http://desandro.com/demo/masonry/docs/

演示地址:http://desandro.com/demo/masonry/docs/

下载地址:http://desandro.com/resources/jquery-masonry/

CSS Floats

1

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris.

2

Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.

3

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula.

4

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.

5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

6

Cadipiscing in, lacinia vel, tellus.

7

Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

8

Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse ac urna. Etiam pellentesque.

9

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

10

Etiam pellen tesque mauris ut lectus.

11

Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.

12

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Masonry

1

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris.

2

Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.

3

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula.

4

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.

5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

6

Cadipiscing in, lacinia vel, tellus.

7

Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

8

Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse ac urna. Etiam pellentesque.

9

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

10

Etiam pellen tesque mauris ut lectus.

11

Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.

12

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.