前言：由于Kissy WaterFall默認是監聽滾動事件來實現數據動態加載的，但是有一些情況要用到手動加載數據。以下是使用Kissy WaterFall實現手動加載數據的方法。
最終實現效果：點擊”逛更多的商店“會動態加載數據
步驟：
- 當一頁數據加載完成后停止監聽滾動事件
//加載一頁數據完成后觸發的事件waterfall.on('addComplete', function () {S.log('after add complete!');waterfall.pause();}); - 為按鈕綁定重啟監聽滾動事件
//加載更多按鈕$("#button_container_more").on('click',function(){ waterfall.resunme();}); - 附錄：waterfall.pause()與water.resunme()的說明（從官網上轉載的）
pause()函數和resunme()函數屬于插件里的waterfall.loader對象的
resunme() ：繼續開始監控scroll事件（隨時可能會動態加載）
pause() ：停止監控scroll事件（停止動態加載）
參考網址：http://docs.kissyui.com/docs/html/api/component/waterfall/loader.html#waterfall.Waterfall.prototype.pause
出現問題：按照以上來完成的話，當點擊”加載更多“按鈕時，只是啟動了滾動監聽。意思就是，要加載數據，一要點擊按鈕，二要再次滾動鼠標。這樣的用戶體驗很差。
解決辦法：修改按鈕動作：new一個waterfall.loader，重新賦值waterfall對象，再重新綁定addComplete事件。
代碼如下：
$("#button_container_more").on('click',function(){ waterfall = new Waterfall.Loader({container:"#ColumnContainer",load:function (success, end) {$('#loadingPins').show();$('.loader').hide();S.ajax({data:{'method':'flickr.photos.search','api_key':'5d93c2e473e39e9307e86d4a01381266','tags':'rose','page':nextpage,'per_page':20,'format':'json'},url:'http://api.flickr.com/services/rest/',dataType:"jsonp",jsonp:"jsoncallback",success:function (d) {// 如果數據錯誤, 則立即結束if (d.stat !== 'ok') {alert('load data error!');end();return;}// 如果到最后一頁了, 也結束加載nextpage = d.photos.page + 1;if (nextpage > d.photos.pages) {end();return;}// 拼裝每頁數據var items = [];S.each(d.photos.photo, function (item) {/*所用到的字段：**price**height**collection**title**src*/item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height item.collection = 10; //測試用item.price = 1800; //測試用items.push(S.substitute(tpl,item));});success(items);},complete:function () {$('#loadingPins').hide();$('.loader').show();}});},minColCount:2,colWidth:175//align:'left' // right, center (default)});waterfall.on('addComplete', function () {S.log('after add complete!');waterfall.pause();}); });
最終整個腳本文件：
KISSY.use("waterfall,ajax,node,button", function (S, Waterfall, io, Node, Button) {var $ = Node.all;var tpl = $('#tpl').html(),nextpage = 1,waterfall = new Waterfall.Loader({container:"#ColumnContainer",load:function (success, end) {$('#loadingPins').show();S.ajax({data:{'method':'flickr.photos.search','api_key':'5d93c2e473e39e9307e86d4a01381266','tags':'rose','page':nextpage,'per_page':20,'format':'json'},url:'http://api.flickr.com/services/rest/',dataType:"jsonp",jsonp:"jsoncallback",success:function (d) {// 如果數據錯誤, 則立即結束if (d.stat !== 'ok') {alert('load data error!');end();return;}// 如果到最后一頁了, 也結束加載nextpage = d.photos.page + 1;if (nextpage > d.photos.pages) {end();return;}// 拼裝每頁數據var items = [];S.each(d.photos.photo, function (item) {/*所用到的字段：**price**height**collection**title**src*/item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height item.collection = 10; //測試用item.price = 1800; //測試用items.push(S.substitute(tpl,item));});success(items);},complete:function () {$('#loadingPins').hide();}});},minColCount:2,colWidth:175//align:'left' // right, center (default)});waterfall.on('adjustComplete', function () {S.log('after adjust complete!');});//加載一頁數據完成后觸發的事件waterfall.on('addComplete', function () {S.log('after add complete!');waterfall.pause();});// scrollTo$('#BackToTop').on('click', function (e) {e.halt();e.preventDefault();$(window).stop();$(window).animate({scrollTop:0}, 1, "easeOut");});//加載更多按鈕$("#button_container_more").on('click',function(){ waterfall = new Waterfall.Loader({container:"#ColumnContainer",load:function (success, end) {$('#loadingPins').show();$('.loader').hide();S.ajax({data:{'method':'flickr.photos.search','api_key':'5d93c2e473e39e9307e86d4a01381266','tags':'rose','page':nextpage,'per_page':20,'format':'json'},url:'http://api.flickr.com/services/rest/',dataType:"jsonp",jsonp:"jsoncallback",success:function (d) {// 如果數據錯誤, 則立即結束if (d.stat !== 'ok') {alert('load data error!');end();return;}// 如果到最后一頁了, 也結束加載nextpage = d.photos.page + 1;if (nextpage > d.photos.pages) {end();return;}// 拼裝每頁數據var items = [];S.each(d.photos.photo, function (item) {/*所用到的字段：**price**height**collection**title**src*/item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height item.collection = 10; //測試用item.price = 1800; //測試用items.push(S.substitute(tpl,item));});success(items);},complete:function () {$('#loadingPins').hide();$('.loader').show();}});},minColCount:2,colWidth:175//align:'left' // right, center (default)});waterfall.on('addComplete', function () {S.log('after add complete!');waterfall.pause();}); });//收藏按鈕功能var collect;$('#ColumnContainer').delegate("mouseover", ".collect", function (event) {var w = $(event.currentTarget).children("span");var text = w.text();if(text >= 0){collect = text;}w.replaceWith("<span class='collects'>收藏</span>");//w.css("text-indent","3px");});$('#ColumnContainer').delegate("mouseout", ".collect", function (event) {var w = $(event.currentTarget).children("span");w.replaceWith("<span class='collectionAmount'>"+collect+"</span>");//w.css("text-indent","13px");});});
）)
