waterfall 介绍
这是瀑布流布局 插件 ,类似于 Pinterest、花瓣、发现啦。
使用
html：
<div id="container"></div>
引入jquery，handlebars和waterfall(注：waterfall 默 认返回json格式数据并使用handlebars模板渲染json数据，你也可以在options中配置使用其它JavaScript模板如mustache解析json数据或者直接返回html):
<script src="/path/jquery.min.js"></script>
<script src="/path/handlebars.js"></script>
<script src="/path/waterfall.min.js"></script>
template:
<script id="waterfall-tpl" type="text/x-handlebars-template">
//template content
</script>
script:
$('#container').waterfall({
itemCls: 'waterfall-item',
prefix: 'waterfall',
fitWidth: true,
colWidth: 240,
gutterWidth: 10,
gutterHeight: 10,
align: 'center',
minCol: 1,
maxCol: undefined,
maxPage: undefined,
bufferPixel: -50,
containerStyle: {
position: 'relative'
},
resizable: true,
isFadeIn: false,
isAnimated: false,
animatio nop tions: {
},
isA utop refill: true,
checkImagesLoaded: true,
path: undefined,
dataType: 'json',
p ara ms: {},
loadingMsg: '<div><img src="data:image/gif;base64" alt=""><br />Loading...</div>',
state: {
isDuringAjax: false,
isProcessingData: false,
isResizing: false,
curPage: 1
},
// callbacks
callbacks: {
/*
* loadingStart
* @p ara m {Object} loading $('#waterfall-loading')
*/
loadingStart: function($loading) {
$loading.show();
//console.log('loading','start');
},
/*
* loadingFinished
* @p ara m {Object} loading $('#waterfall-loading')
* @p ara m {Boolean} isBeyondMaxPage
*/
loadingFinished: function($loading,isBeyondMaxPage) {
if ( !isBeyondMaxPage ) {
$loading.fadeOut();
//console.log('loading finished');
} else {
//console.log('loading isBeyondMaxPage');
$loading.remove();
}
},
/*
* loadingError
* @p ara m {String} xhr,"end" "error"
*/
loadingError: function($message,xhr) {
$message.html('Data load faild,please try again later.');
},
/*
* renderData
* @p ara m {String} data
* @p ara m {String} dataType,"json","jsonp","html"
*/
renderData: function (data,dataType) {
var tpl,
template;
if ( dataType === 'json' || dataType === 'jsonp' ) { // json or jsonp format
tpl = $('#waterfall-tpl').html();
template = Handlebars.compile(tpl);
return template(data);
} else { // html format
return data;
}
}
},
debug: false
});
options
Name
Type
Default value
Description
itemCls
String
'waterfall-item'
瀑布流数据块class
prefix
String
'waterfall'
瀑布流元素前辍
fitWidth
Boolean
true
是否自适应父元素宽度
colWidth
Integer
240
瀑布流每列的宽度
gutterWidth
Integer
10
数据块水平间距
gutterHeight
Integer
10
数据块垂直间距
align
String
'center'
数据块相对于容器对齐方式，'align','left','right'
minCol
Integer
1
数据块最小列数
maxCol
Integer
undefined
数据块最多 显示 列数, 默 认undefined，最大列数无限制
maxPage
Integer
undefined
最多 显示 多少页数据, 默 认undefined，无限下拉
bufferPixel
Integer
-50
滚动时,窗口 底部 到瀑布流最小高度列的距离 > bufferPixel时, 自动 加载新数据
containerStyle
Object
{position: 'relative'}
瀑布流 默 认样式
resizable
Boolean
true
缩放时是否触发数据重排
isFadeIn
Boolean
false
新插入数据是否使用fade动画
isAnimated
Boolean
false
resize时数据是否 显示 动画
animatio nop tions
Object
{}
resize动画 效果 ，isAnimated为true时有效
isA utop refill
Boolean
true
当文档小于窗口可见区域， 自动 加载数据
checkImagesLoaded
Boolean
true
是否 图片 加载完成后开始排列数据块。如果直接 后台 输出 图片 尺寸，可设置为false，强烈建议从 后台 输出 图片 尺寸，设置为false
path
Array,Function
undefined
瀑布流数据 分页 url，可以是数组如["/popular/page/","/"] => "/popular/page/1/"，或者是根据 分页 返回 一个 url 方法 如：function(page) { return '/populr/page/' + page; } => "/popular/page/1/"
dataType
String
'json'
瀑布流返回数据格式，'json','jsonp','html'
p ara ms
Object
{}
瀑布流数据请求参数,{type: "popular",tags: "travel",format: "json"} => "type=popular&tags=travel&format=json"
loadingMsg
html
见下面 代码
加载 提示 进度条，html
callbacks
Object
见下面 代码
callback
debug
Boolean
false
开启debug
网站地址 : http://wlog.cn/waterfall/
GitHub: https://github.com/bingdian/waterfall
网站描述: jquery 瀑布流布局 插件 ,类似于 Pinterest
waterfall官方网站
官方网站： http://wlog.cn/waterfall/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。