超强可拖拽的多风格布局的jquery插件Freewall

Freewall是一个跨浏览器和响应式 jQuery插件,它可帮助您创建许多类型的网格布局:flexible布局,图片布局,嵌套网格布局,地铁风格布局,pinterest布局，使用动感的CSS3动画效果和回调事件。Freewall一体化解决方案创建动态网格布局为桌面、手机和平板电脑。

特点：

支持拖拽

支持方向

自定义插件

间隙控制

过滤项

CSS3动画(js后退)

嵌套网格

图像网格/布局

合适的容器

垂直网格/布局

水平网格/布局

win8地铁风格

Pinterest网格/布局

jquery实例：Freewall的使用方法

引入核心文件

1 2	`<script` `type="text/javascript"` `src="example/js/jquery-1.10.2.min.js"></script>` `<script` `type="text/javascript"` `src="freewall.js"></script>`

写入CSS样式

#container {

width: 80%;

margin: auto;

}

.item {

background: rgb(135, 199, 135);

width: 320px;

height: 320px;

}

构建html代码

<div id="container">

<div class="item"></div>

</div>

写入JS初始化

$(function() {

var wall = new freewall("#container");

wall.fitWidth();

});

Freewall的参数选项、事件、方法相当的多，需要请参考实例或是到官方查看文档。