jquery 瀑布流插件
2019年11月30日
作者:佚名
瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。
文档 项目地址https://github.com/bingdian/waterfall
下载下载waterfall插件最新版本。
使用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(options);options
loadingMsg:
'<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:
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格式