瀑布流布局插件，类似于Pinterest、花瓣、发现啦。

文档

项目地址

https://github.com/bingdian/waterfall

下载

下载瀑布插件最新版本。

使用

html:

div id='container'/div

引入jquery，车把和瀑布（注：瀑布默认返回数据格式数据并使用把手模板渲染数据数据，你也可以在选择中配置使用其它爪哇岛描述语言模板如髭解析数据数据或者直接返回html):

脚本src='/path/jquery。min . js '/script script src='/path/handler bar。js '/script script src='/path/瀑布。量滴js '/脚本

模板：

脚本id='瀑布“tpl”类型=' text/x-handlers-template//template content/script

script:

$('#container ').瀑布（选项);

options

名字

类型

缺省值

描述

itemCls

线

"瀑布项目"

瀑布流数据块班级

前缀

线

"瀑布"

瀑布流元素前辍

fitWidth

布尔代数学体系的

真实的

是否自适应父元素宽度

列宽

整数

240

瀑布流每列的宽度

檐槽宽度

整数

10

数据块水平间距

檐槽高度

整数

10

数据块垂直间距

排列

线

"中心"

数据块相对于容器对齐方式，'对齐','向左','向右'

minCol

整数

一

数据块最小列数

maxCol

整数

不明确的

数据块最多显示列数，默认未定义，更大列数无限制

maxPage

整数

不明确的

最多显示多少页数据，默认未定义，无限下拉

缓冲像素

整数

-50

滚动时，窗口底部到瀑布流最小高度列的距离缓冲像素时，自动加载新数据

容器样式

目标

{position: 'relative'}

瀑布流默认样式

可调整大小的

布尔代数学体系的

真实的

缩放时是否触发数据重排

isFadeIn

布尔代数学体系的

错误的

新插入数据是否使用乏味的动画

isAnimated

布尔代数学体系的

错误的

调整大小时数据是否显示动画

动画选项

目标

{}

调整大小动画效果，isAnimated为真实的时有效

isaauto笔芯

布尔代数学体系的

真实的

当文档小于窗口可见区域，自动加载数据

检查图像加载

布尔代数学体系的

真实的

是否图片加载完成后开始排列数据块。如果直接后台输出图片尺寸，可设置为假的，强烈建议从后台输出图片尺寸，设置为错误的

小路

数组，函数

不明确的

瀑布流数据分页url，可以是数组如["/popular/page/"，"/"]="/popular/page/1/'，或者是根据分页返回一个全球资源定位器(统一资源定位符)方法如：function(page){ return '/populr/page/' page；}="/popular/page/1/"

数据类型

线

json '

瀑布流返回数据格式，' json '，' jsonp '，' html '

参数

目标

{}

瀑布流数据请求参数，{type: 'popular "，tags: "travel "，format : " JSON " }=" type=popular tags=travel format=JSON "

加载重力梯度仪

超文本标记语言

见下面代码

加载提示进度条，html

回调

目标

见下面代码

回收

加载sg:

lt .div style=' text-align : center；padd :10 px 0；颜色： # 999lt .img src=' data : image/gif；base64，r0lgodlheaapqaap///zm li4 tra 2 u 7u 7 JK 5 otmzm 1 hywjubm 4 cagmjie 9 pt 29 VB 6 ki ooodg 8 vly 1 jsu JC 3n 3 jycuvr 6 dg4 Pb 29 bgyopj 4/x19 cxfxbozs 9 xv1 fhx 8 tmzmzmzmzmzmzmzmyyyyyyyyh baklaaaaaaif 4 AQ 3 jlyxrlzb3 axroyxhssb2 fklmluzm正在加载.lt ./div '

callbacks:

回调： {/* * Ajax请求开始之前* @param {Object}正在加载$(' #故障加载')*/加载开始：函数($ loading){ $ loading。show()；}、/* * ajax请求加载完成* @param {Object}正在加载$(' # fault-loading ')* @ param { Boolean }超出更大页数*/加载完成：函数($loading，isBeyondMaxPage) { if(！isBeyondMaxPage){ $ loading。fade out()；} else { $ loading。移除()；} }，/* * ajax请求出错误* @param {String} xhr，' end ' ' error ' */loading error : function($ message，xhr) { $message.html('数据加载失败，请稍后再试。');}, /* * 处理创建交互式、快速动态网页应用的网页开发技术返回数方法* @param {String}数据* @param {String} dataType，' json '，' jsonp '，' html' */renderData:函数(数据，dataType) { var tpl，template if(DataType==' JSON ' | | DataType==' jsonp '){//JSON或跨域请求格式TPL=$(' #瀑布-tpl ').html()；模板=车把。编译(TPL)；返回模板（数据);} else { //html格式返回数据；} }}

method

$('#container ').瀑布(' methodName '，[可选参数])；

prepend

$('#container ').瀑布(' prepend '，$content，callback)；

append

$('#container ').瀑布(' append '，$content，callback)；

removeItems

$('#container ').瀑布(' removeItems '，$items，回调);

reLayout

$('#container ').瀑布(' reLayout '，$content，回调);

pause

$('#container ').瀑布('暂停，回调);

resume

$('#container ').瀑布('简历'，回调);

option

$('#container ').瀑布(' option '，options，callback)；

Demos

无限下拉数据

有限下拉数据完成后显示分页

瀑布流固定宽度

自定义更大列最小列

调整大小动画效果

加载数据时渐显效果

左侧或右侧固定列

使用其它模板如髭解析数据数据

创建交互式、快速动态网页应用的网页开发技术加载超文本标记语言格式

没有更多数据处理

创建交互式、快速动态网页应用的网页开发技术加载跨域请求格式