扫一扫分享
这是瀑布流布局插件, 类似于 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,
animationOptions: {
},
isAutoPrefill: true,
checkImagesLoaded: true,
path: undefined,
dataType: 'json',
params: {},
loadingMsg: '<div><img src="data:image/gif;base64" alt=""><br />Loading...</div>',
state: {
isDuringAjax: false,
isProcessingData: false,
isResizing: false,
curPage: 1
},
// callbacks
callbacks: {
/*
* loadingStart
* @param {Object} loading $('#waterfall-loading')
*/
loadingStart: function($loading) {
$loading.show();
//console.log('loading', 'start');
},
/*
* loadingFinished
* @param {Object} loading $('#waterfall-loading')
* @param {Boolean} isBeyondMaxPage
*/
loadingFinished: function($loading, isBeyondMaxPage) {
if ( !isBeyondMaxPage ) {
$loading.fadeOut();
//console.log('loading finished');
} else {
//console.log('loading isBeyondMaxPage');
$loading.remove();
}
},
/*
* loadingError
* @param {String} xhr , "end" "error"
*/
loadingError: function($message, xhr) {
$message.html('Data load faild, please try again later.');
},
/*
* renderData
* @param {String} data
* @param {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
});
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时数据是否显示动画 |
animationOptions | Object | {} | resize动画效果,isAnimated为true时有效 |
isAutoPrefill | 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' |
params | Object | {} | 瀑布流数据请求参数,{type: "popular", tags: "travel", format: "json"} => "type=popular&tags=travel&format=json" |
loadingMsg | Html | 见下面代码 | 加载提示进度条,html |
callbacks | Object | 见下面代码 | callback |
debug | Boolean | false | 开启debug |
手机预览