注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

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

UI fishcity 5320浏览

jquery插件Freewall

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

特点:

支持拖拽

支持方向

自定义插件

响应式网格

间隙控制

过滤项

CSS3动画(js后退)

嵌套网格

图像网格/布局

合适的容器

垂直网格/布局

水平网格/布局

win8地铁风格

Pinterest网格/布局

jquery实例:Freewall的使用方法

引入核心文件

<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 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初始化

 $(function() {
      var wall = new freewall("#container");
      wall.fitWidth();
    });

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

转载请注明:jQ酷 » 超强可拖拽的多风格布局的jquery插件Freewall

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。