Git Product home page Git Product logo

waterfall's Introduction

堆糖瀑布流(Woo) jQuery完整版

涵盖以下特点:

o) 数据配置灵活,可在html 里直接放置瀑布流单元(一般只放第一子页)。

o) 数据格式灵活,可处理josn格式的数据(推荐),也可兼容html字符串格式的数据。

o) 独立的数据控制文件 masnunit.js。

o) 同一页面上通过tab 切换植入多个不同类型的瀑布流,切换无刷新。

o) 不同于infinite 瀑布流,可进行翻页控制。子页数量设置无限大时等同于infinite。

o) 实现hash 无刷新翻页,并兼容浏览器的前进后退功能。

o) 至页底时,会预加载下一页第一子页内容。

o) 根据当前环境自动控制瀑布流列数,可自适应屏幕宽度,也可通过css 设置固定宽度。

o) 可采用 sink 模式,在瀑布流左侧或右侧第一列嵌入外部区块。

o) 可配置直接向前(后)翻页的小翻页器。

o) 自带回到顶部功能,并能控制距离顶部的准确位置,准确说是回到预埋锚点的位置(可设置偏移量)。

o) 强大的 window resize 自动重绘功能(IE下不建议打开此功能)。

o) 灵活的参数设置,比如:子页数量、子页内单元数量、瀑布流单元宽度和间距 等等等等。

一些保留命名 >>

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.