前言：由于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");});});
