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

jquery动态网格瀑布流插件Wookmark

UI fishcity 4020浏览

jquery动态网格瀑布流

Wookmark是Wookmark.com为了让亲们轻松的创建出其网站的效果而做的一个jquery动态网格瀑布流插件,参数丰富,使用简单。源码中包含了许多实例,大大的方便于项目的使用。

jquery实例:Wookmark使用方法

引入核心文件

 <!-- 引入jquery -->
  <script src="../libs/jquery.min.js"></script>

  <!-- 引入wookmark插件 -->
  <script src="../jquery.wookmark.js"></script>

构建html

<div id="main" role="main">

      <ul id="tiles">
        <!-- These are our grid blocks -->
        <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>1</p></li>
        <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>2</p></li>
        <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>3</p></li>
        <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>4</p></li>
        <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>5</p></li>
        <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>6</p></li>
        <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>7</p></li>
        <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>8</p></li>
        <!-- 可添更多的内容 -->
      </ul>

    </div>

写入JS初始化

$('#tiles li').wookmark();

参数

$('.myElements').wookmark({
  align: 'center',
  autoResize: false,
  comparator: null,
  container: $('body'),
  direction: undefined,
  ignoreInactiveItems: true,
  itemWidth: 0,
  fillEmptySpace: false,
  flexibleWidth: 0,
  offset: 2,
  onLayoutChanged: undefined,
  outerOffset: 0,
  possibleFilters: [],
  resizeDelay: 50,
  verticalOffset: undefined
});

align – "left", "right", 和"center"

autoResize – 如果为 "true", 浏览器改变大小后更新图层

resizeDelay – 默认 "50"毫秒, 浏览器改变大小与图片更新间的间隔时长

comparator -自定义排序函数

container -装载动态网格的元素, 默认 "window". 如 $('myContentGrid'). 该容器需要要CSS属性 "position: relative".

direction – "left" 或者 "right", 从左上角还是右上角开始

ignoreInactiveItems – 如果为 "true",激活的项目是可见的, 用可过滤项目

itemWidth – item的宽度,可以是像素,也可以是百分比。 默认为第一个项目的宽度。

fillEmptySpace – 如果为 "true",在每一列的底部会用一个空白的item填满对齐。

flexibleWidth – "true" or "false", 基于浏览器的大小动态调整item的最佳尺寸。

offset – item与item间横向坚向的间隔, 默认为 2

onLayoutChanged – 图层改变后调用的函数

outerOffset – 默认值 "0"

转载请注明:jQ酷 » jquery动态网格瀑布流插件Wookmark

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