# waterfall
**Repository Path**: chenfz/waterfall
## Basic Information
- **Project Name**: waterfall
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-26
- **Last Updated**: 2025-09-26
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Pinterestlike Website(jQuery) #
This is a full set of Front-end Solutions for Pinterestlike websites.
version: 1.1.1
## Features:
1. Multi-waterfalls are supported in one page.
1. First subpage can be preseted in html without length-limit.
1. Seperated js file for dealing with response data.
1. Different from infinite waterfall, contents are paged.
1. Page turning without refreshing. History go back and go forward are supported.
1. Preload next page when you reach the bottom.
1. In sink mode, you can insert one block into waterfall either on the left side or the right side.
1. Special column can be set.
1. Useful next(pre) button composed with go-to-top button.
1. Go-to-top button can bring you to a precise position you want to go.
1. Dazzling resize mode.
1. Flexible configs such as: subpagenum in one Upper Page, unitsnum in one subpage etc
1. if {"exrecycle" : true} is set, invisible units would be recycled during scrolling.
1. Support Zeptojs.
## Requirements:
* jQuery >= 1.6.1
## Included examples
### Example Sink Mode:
This example shows how to insert an outside block into waterfall either on the left side or on the right side.
Click me to have a look!
### Example Special-Column Mode:
This example shows how to set a special column(different column width) in your waterfall.
Click me to have a look!
### Example Messup Mode:
This example shows a Messup Mode of waterfall in which column covers each other.
Click me to have a look!
### Example Auto-Recycle Mode:
This example shows how to auto-recycle invisible units during scrolling.
Click me to have a look!
### Example simplest demo:
This example shows how to build a simple waterfall page without any other data request.
Click me to have a look!
### Example mobile demo:
This example shows how to build a waterfall page which is running in mobile phone.
Click me to have a look!
### Example order:
This example shows how to deal with unit datas with order operation.
Click me to have a look!
### Example delete:
This example shows how to deal with unit datas with delete operation.
Click me to have a look!
### Example zeptojs:
This example shows how zeptojs works.
Click me to have a look!
## Response data structure recommended:
{"data":{"blogs":[${unit},...,${unit}],"has_next":true,"totalcount":202},"success":true}
data.blogs must be an array which contains waterfall units. The unit length in one subpage must be concordant with the value of param `unitsnum`. data.has_next is necessary, which is needed to judge the existance of next subpage, while data.totalcount is optional, which will update the total unit count and total page count. success refers to data request status, a tip "busy, retry~" will be shown while the value is false.
# 堆糖瀑布流(jQuery) #
## 涵盖以下特点：
1. 数据配置灵活，可在 html 里直接放置瀑布流单元(一般只放第一子页)。
1. 数据格式灵活，可处理 josn 格式的数据(推荐)，也可兼容 html 字符串格式的数据。
1. 独立的数据控制文件 masnunit.js。
1. 同一页面上通过 tab 切换植入多个不同类型的瀑布流，切换无刷新。
1. 不同于 infinite 瀑布流，可进行翻页控制。子页数量设置无限大时等同于 infinite。
1. 实现 hash 无刷新翻页，并兼容浏览器的前进后退功能。
1. 至页底时，会预加载下一页第一子页内容。
1. 根据当前环境自动控制瀑布流列数，可自适应屏幕宽度，也可通过
`data-domwidth` 设置固定宽度。
1. 可采用 sink 模式，在瀑布流左侧或右侧第一列嵌入外部区块。
1. 可配置直接向前(后)翻页的小翻页器。
1. 自带回到顶部功能，并能控制距离顶部的准确位置，
准确说是回到预埋锚点的位置(可设置偏移量)。
1. 强大的 window resize 自动重绘功能( IE 下不建议打开此功能)。
1. 可通过配置参数激活特殊列(只能是最左或最右列)，此列宽度可不同于其它列。
1. 灵活的参数设置，比如：子页数量、子页内单元数量、瀑布流单元宽度和间距 等等等等。
1. 可轻松通过 "exrecycle" : true 参数开启超出屏幕范围的单元块回收功能，极大的减少了dom节点数。
1. 支持zeptojs
* 纯静态demo演示——主功能
* 纯静态demo演示——sink开启
* 纯静态demo演示——specialcol开启
* 纯静态demo演示——Messup 混乱模式
* 纯静态demo演示——自动回收模式
* 纯静态demo演示——mobile模拟
* 纯静态demo演示——简版无请求
* 纯静态demo演示——单元排序
* 纯静态demo演示——单元删除
* 纯静态demo演示——zeptojs
## 一些保留命名 >>
```
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 代码底部每一个 `