堆糖瀑布流 Woo(Waterfall O O) in duitang.com

Reserved Words:

• co(n)

  className with column idx for the .woo unit.

• sc(n)

  className with screen idx for the .woo unit.

• woo-(*)

  reserved className or id.

• woo-form-(*)

  reserved id of forms which contain part of the request url.

• srcd

  replacement of img attribute src for delay loading images.

Requirements:

• browser.js, disappeared in jQuery 1.10.1 and upper versions.
• history.js, handles the hashchange event.(a littel fat~)
• tabswitch.js, supports switching in different waterfalls.
• (optional)template.min.js, pieces together html strings.(See more in masnunit.js)

Guides:

• 1) Each <form > at the bottom of the page represents a single waterfall. You need to put the url of subpage data request into those forms. We use getFormAction() and paramForm() to get what is needed.
• 2) If only one waterfall is prepared，please delete the unnecessary <form >, '.woo-swa' and '.woo-swb' tags.
• 3) If no fixed width is given to '.woo-masned(.woo-pcont)', waterfall will fill the parent like a Response-type layout does. Otherwise, if you give a 1000px width to it by setting data-domwidth="1000", then it will keep that width all the time.
• 4) You can preset some(no limit) '.woo' tags in '.woo-pcont' in html(not in js), they will be treated as the first subpage. Then waterfall request will start from subpage No. 2.
• 5) Multiple waterfalls are supported as you can see, and settings for each waterfall can be different by setting 'data-' attributes on '.woo-pcont'. Global settings such as 'subpagenum', 'unitsnum', 'sink', 'sinkheight' and 'sinkright' would be overrided.
• 6) 'data-' attributes on '.woo-pcont' now supported: 'data-subpagenum', 'data-unitsnum', 'data-totalunits', 'data-wootemp', 'data-sink', 'data-sinkheight', 'data-sinkright'.
• 7) 'data-wootemp', number, the idx of TEMPLATES you've already made in masnunit.js. Different numbers represent different waterfall patterns. Corresponding functions RENDER[idx], ANALYZERESPONSE[idx] are also given in masnunit.js.
• 8) Does next upper page exist? Feature 'hasnext' in each subpage response has the toppest priority. If hasnext=true, the next button will be visible even if the real total unitsnum has already exceeded the number preseted by 'data-totalunits'.
• 9) DEBUG mode has been opened in demos. DEBUG_DATA is being used after each successful request.
• 10) We've given several different-pattern waterfalls.
• 11) masnunit.js should be read carefully.

一些保留命名 >>

• 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) 是否有下一大页的设定最优先依赖于请求返回里的hasnext字段，如果hasnext=true，即便总单元已经超过`data-totalunits`的设定，仍然会显示下一页按钮。
• 9) 示例使用了DEBUG 并分别在 main.html 和 masnunit.js 里给定了模拟数据。
• 10) 可在 masnunit.js 里编写不同种类的瀑布流，示例给出了两种：图片类型和专辑类型。
• 11) 请仔细研究 masnunit.js。