jQuery的masonry插件实现瀑布流布局

在要实现瀑布流布局的页面上引用jquery和masonry，如下

 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="js/masonry.pkgd.min.js"></script>

初始化瀑布流插件参数

$(function(){
            $(\'.masonry_grid\').masonry({
            // masonry_grid是整个瀑布流布局的大包裹层
            itemSelector: \'.grid_item\',  //这是瀑布流每个子类目
            gutter: 20, //每个子类目之间的间隔
            isAnimated: true   //窗口宽度变化时是否动态改变列数
                });
}）

html布局示例

<div class="masonry_grid">
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
</div>