超强可拖拽的多风格布局的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样式
|
1
2
3
4
5
6
7
8
9
|
#container {
width
:
80%
;
margin
:
auto
;
}
.item {
background
:
rgb
(
135
,
199
,
135
);
width
:
320px
;
height
:
320px
;
}
|
构建html代码
|
1
2
3
4
5
6
7
8
9
|
<
div
id
=
"container"
>
<
div
class
=
"item"
></
div
>
<
div
class
=
"item"
></
div
>
<
div
class
=
"item"
></
div
>
<
div
class
=
"item"
></
div
>
<
div
class
=
"item"
></
div
>
<
div
class
=
"item"
></
div
>
<
div
class
=
"item"
></
div
>
</
div
>
|
写入JS初始化
|
1
2
3
4
|
$(
function
() {
var
wall =
new
freewall(
"#container"
);
wall.fitWidth();
});
|
Freewall的参数选项、事件、方法相当的多，需要请参考实例或是到官方查看文档。
转载请注明：jQ酷 » 超强可拖拽的多风格布局的jquery插件Freewall