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

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

 UI  fishcity  8个月前 (11-28)  2750浏览

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

 

下载地址：本站下载 | 百度云 | 官方下载