jquery 瀑布流插件

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

文档

项目地址

https://github.com/bingdian/waterfall

下载

下载waterfall插件最新版本。

使用

html：

引入jquery，handlebars和waterfall(注：waterfall默认返回json格式数据并使用handlebars模板渲染json数据，你也可以在options中配置使用其它javascript模板如mustache解析json数据或者直接返回html):

template:

 //template content

script:

$('#container').waterfall(options);
    

options

loadingMsg:

'&
    lt;
    div style="text-align:center;
    padding:10px 0;
     color:#999;
    ">
    &
    lt;
    img src="data:image/gif;
    base64,R0lGODlhEAALAPQAAP///zMzM+Li4tra2u7u7jk5OTMzM1hYWJubm4CAgMjIyE9PT29vb6KiooODg8vLy1JSUjc3N3Jycuvr6+Dg4Pb29mBgYOPj4/X19cXFxbOzs9XV1fHx8TMzMzMzMzMzMyH5BAkLAAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7" alt="">
    &
    lt;
    br />
    Loading...&
    lt;
    /div>
    '

callbacks:

callbacks: {
 /* * ajax请求开始之前 * @param {
Object}
 loading $('#waterfall-loading') */ loadingStart: function($loading) {
     $loading.show();
 }
, /* * ajax请求加载完成 * @param {
Object}
 loading $('#waterfall-loading') * @param {
Boolean}
 isBeyondMaxPage */ loadingFinished: function($loading, isBeyondMaxPage) {
 if ( !isBeyondMaxPage ) {
     $loading.fadeOut();
 }
 else {
     $loading.remove();
 }
 }
, /* * ajax请求出错误 * @param {
String}
 xhr , "end" "error" */ loadingError: function($message, xhr) {
     $message.html('Data load faild, please try again later.');
 }
, /* * 处理ajax返回数方法 * @param {
String}
 data * @param {
String}
 dataType , "json", "jsonp", "html" */ renderData: function (data, dataType) {
     var tpl, template;
 if ( dataType === 'json' || dataType === 'jsonp' ) {
     // json或jsonp格式 tpl = $('#waterfall-tpl').html();
     template = Handlebars.compile(tpl);
     return template(data);
 }
 else {
     // html格式 return data;
 }
 }
}
    

method

$('#container').waterfall( 'methodName', [optionalParameters] );
    

prepend

$('#container').waterfalll('prepend', $content, callback);
    

append

$('#container').waterfalll('append', $content, callback);
    

removeItems

$('#container').waterfalll('removeItems', $items, callback);
    

reLayout

$('#container').waterfalll('reLayout', $content, callback);
    

pause

$('#container').waterfalll('pause', callback);
    

resume

$('#container').waterfalll('resume', callback);
    

option

$('#container').waterfalll('option', options, callback);
    

Demos

• 无限下拉数据
• 有限下拉数据完成后显示分页
• 瀑布流固定宽度
• 自定义最大列最小列
• resize动画效果
• 加载数据时fadeIn效果
• 左侧或右侧固定列
• 使用其它模板如mustache解析json数据
• ajax加载html格式
• 没有更多数据处理
• ajax加载jsonp格式

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！