最近在建网站的时候，有些涉及到很多图片布局，想采用流行的水流布局。

一开始是我自己写的，浪费时间。我没有考虑检测图片的大小。虽然我可以达到布局效果，但是有些图片尺寸比较小但是被强行放大了，看起来很不协调。后来在网上查了一下，发现有一个不错的水流布局工具可以用。来看看这个神器吧~神器名称：JQuery砖石，网站：http://masonry.desandro.com/index.html

使用方法相当简单：

1.标记要布局的容器和项目

砖石工程需要一个容器来装载结构相似的子元素

Div id='容器' div class='项目'./div div class=' item '.div div class=' item './div./div然后向页面添加jquery和砖石脚本引用，要求Jquery版本为1.6

脚本src=' http://Ajax . googleapi.com/Ajax/libs/jquery/1 . 6 . 1/jquery . min . js '/script script src=' http 3360/path/to/jquery .砖石结构. min.js'/script2，编写CSS

要布局的所有元素的大小由CSS决定，所有元素必须是浮动的eg:项目{ width: 220pxmargin: 10px向左浮动：} 3.写脚本

写一个脚本，传入初始化布局参数，这样容器就可以自动布局了。强烈建议配置两个参数，itemSelector和columnWidth。更多参数配置请参考官网。

$(function(){ $('#container '))。砖石工程({ //选项itemSelector : '。item '，column width : 240 })；});好了，就这样。好容易~

看效果

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。