waterfall

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,

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

});

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时数据是否显示动画

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

网站地址:http://wlog.cn/waterfall/

GitHub:https://github.com/bingdian/waterfall

网站描述:jquery 瀑布流布局插件,类似于 Pinterest

waterfall

官方网站：http://wlog.cn/waterfall/