超強可拖拽的多風格布局的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