带分页的jQuery堆糖网瀑布流布局代码

来源:https://www.sucaihuo.com/js/3414.html 2018-01-23 15:49浏览(1282) 收藏

一款非常好用带分页的jQuery堆糖网瀑布流布局代码,可以助你很方便的搭建瀑布流网站。
带分页的jQuery堆糖网瀑布流布局代码
分类:图片代码 > 网格 难易:初级
查看演示 下载资源 下载积分: 30 积分

一些依赖

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

一些使用方法

1) 在main.html 代码底部每一个
对应一个瀑布流的数据请求地址。
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。
标签: 瀑布流分页
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2