牛牛逼逼叉叉
菜单

jquery瀑布流设计-源码下载

2013年12月16日,分类《资源共享》,作者:
博客捐助

QQ截图20131216215437.png

QQ截图20131216215457.png

一些保留命名 >>

  • co(n)

    单元块所在列数对应的className

  • sc(n)

    单元块所在屏数对应的className

  • woo-(*)

    Woo内部特殊用途的className or id

  • woo-form-(*)

    form 表单的 id,用作请求地址url的拼装

  • srcd

    单元块内的图片src 属性的替代,图片延迟加载功能使用

一些依赖 >>

  • 依赖 browser.js 用于兼容1.10 及以上jQuery 版本的$.browser 对象
  • 依赖 history.js 监控hashchange 事件
  • 依赖(非必需) template.min.js 组装html 字符串,详见 masnunit.js
  • 依赖 tabswitch.js 用于不同瀑布流的切换

一些使用方法 >>

  • 1) 在main.html 代码底部每一个<form >对应一个瀑布流的数据请求地址。
  • 2) 如页面上只需要一个瀑布流,请相应的删除掉多余的form 表单和 .woo-swa .woo-swb节点。
  • 3) 如不给定 .woo-masned 节点的宽度,会自动适应屏幕宽度。专辑类型示例中给定了 1000px 的宽度。
  • 4) .woo-pcont 节点内可预先放好若干个单元(个数没有限制),预先放置的会被当做第一子页数据,后面会直接从第二子页开始。
  • 5) 一个页面可以有多个瀑布流,不同瀑布流的配置可以差异化。通过在各自.woo-pcont节点上设置 data- 属性,例如:data-subpagenum data-unitsnum data-sink来覆盖全局配置。
  • 6) .woo-pcont节点上目前支持的data- 配置有:data-subpagenum data-unitsnum
    data-totalunits data-wootemp data-sink data-sinkheight data-sinkright。
  • 7) data-wootemp 取值为从0开始的整数,对应 masnunit.js 文件里定义的不同类型瀑布流。
  • 8) 示例使用了DEBUG 并分别在 main.html 和 masnunit.js 里给定了模拟数据。
  • 9) 可在 masnunit.js 里编写不同种类的瀑布流,示例给出了两种:图片类型和专辑类型。
  • 10) 请仔细研究 masnunit.js。

下载地址:http://pan.baidu.com/share/link?shareid=1377398606&uk=3322993084



发表评论

电子邮件地址不会被公开。 必填项已用*标注

【上一篇】

论出轨换号不用联通的重要性-转载[习科]

【下一篇】

jquery_gallery响应式图片幻灯片插件_全屏自适应屏幕大小的图片幻灯片切换