waterfall瀑布流插件 · PHP筆記

[Waterfall by bingdian (wlog.cn)](http://wlog.cn/waterfall/index-zh.html) ## **選項** | 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 | ## **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; } } } ~~~ ## **方法** ~~~ $('#container').waterfall( 'methodName', [optionalParameters] ); ~~~ **prepend** ~~~ $('#container').waterfall('prepend', $content, callback); ~~~ **append** ~~~ $('#container').waterfall('append', $content, callback); ~~~ **removeItems** ~~~ $('#container').waterfall('removeItems', $items, callback); ~~~ **reLayout** ~~~ $('#container').waterfall('reLayout', $content, callback); ~~~ **pause** ~~~ $('#container').waterfall('pause', callback); ~~~ **resume** ~~~ $('#container').waterfall('pause', callback); ~~~ **option** ~~~ $('#container').waterfall('option', options, callback); ~~~ ## Demos * [無限下拉數據](http://wlog.cn/demo/waterfall/infinitescroll.html) * [有限下拉數據完成后顯示分頁](http://wlog.cn/demo/waterfall/finitescroll.html) * [瀑布流固定寬度](http://wlog.cn/demo/waterfall/custom-width.html) * [自定義最大列最小列](http://wlog.cn/demo/waterfall/min-max-columns.html) * [resize動畫效果](http://wlog.cn/demo/waterfall/animate.html) * [加載數據時fadeIn效果](http://wlog.cn/demo/waterfall/fadein.html) * [左側或右側固定列](http://wlog.cn/demo/waterfall/fixed-left-or-right.html) * [使用其它模板如mustache解析json數據](http://wlog.cn/demo/waterfall/mustache.html) * [ajax加載html格式](http://wlog.cn/demo/waterfall/html.html) * [ajax加載jsonp格式](http://wlog.cn/demo/waterfall/jsonp.html) * [沒有數據處理](http://wlog.cn/demo/waterfall/no-more-data.html) * [methods](http://wlog.cn/demo/waterfall/methods.html) ## **開始:** ### 下載下載[waterfall插件](https://github.com/bingdian/waterfall/archive/master.tar.gz)最新版本。 ### 使用 html： ~~~ <div id="container"></div> ~~~ 引入jquery，handlebars和waterfall(注：waterfall默認返回json格式數據并使用[handlebars](http://handlebarsjs.com/)模板渲染json數據，你也可以在options中配置使用其它javascript模板如[mustache](http://mustache.github.com/)解析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 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>', 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 }); ~~~