瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。VdQHTML5中文学习网 - HTML5先行者学习网

文档

项目地址

https://github.com/bingdian/waterfallVdQHTML5中文学习网 - HTML5先行者学习网

下载

下载waterfall插件最新版本。VdQHTML5中文学习网 - HTML5先行者学习网

使用

html：VdQHTML5中文学习网 - HTML5先行者学习网

<div id="container"></div>

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

<script src="/path/jquery.min.js"></script><script src="/path/handlebars.js"></script><script src="/path/waterfall.min.js"></script>

template:VdQHTML5中文学习网 - HTML5先行者学习网

<script id="waterfall-tpl" type="text/x-handlebars-template">    //template content</script>

script:VdQHTML5中文学习网 - HTML5先行者学习网

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

options

loadingMsg:VdQHTML5中文学习网 - HTML5先行者学习网

'<div style="text-align:center;padding:10px 0; color:#999;"><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=""><br />Loading...</div>'

callbacks:VdQHTML5中文学习网 - HTML5先行者学习网

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] );

prependVdQHTML5中文学习网 - HTML5先行者学习网

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

appendVdQHTML5中文学习网 - HTML5先行者学习网

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

removeItemsVdQHTML5中文学习网 - HTML5先行者学习网

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

reLayoutVdQHTML5中文学习网 - HTML5先行者学习网

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

pauseVdQHTML5中文学习网 - HTML5先行者学习网

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

resumeVdQHTML5中文学习网 - HTML5先行者学习网

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

optionVdQHTML5中文学习网 - HTML5先行者学习网

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

Demos

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