用kissy做瀑布流是一件很简单的事情，最开始接触kissy的时候，其实也是看到kissy中的效果很好，而且代码很简洁，看到瀑布流的确有想试试的冲动！试一下代码之后发现原来是这么简单，
后来了解了一下kissy的一些结构，包括loader机制和一些动画，发现原来比jquery还简单，这可能正是很多程序员想要找的一个前台框架！希望kissy能越来越完善。。。
<!doctype html> <html> <head> <title>demo</title> <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.2.0/css/reset.css" /> <script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js"></script> <script src="http://a.tbcdn.cn/apps/top/x/sdk.js?t=120525.js"></script> <script type="text/javascript"> TOP.init({ appKey : 21041761,/*appkey */ channelUrl : 'http://127.0.0.1:8080/demo/channel.html'/* channel页面的URL */ }); KISSY.use("waterfall,ajax,template,node,button,dom,event,imagezoom",function(S, Waterfall, io, Template, Node, Button,Event, ImageZoom){ var $ = Node.all; var page_no = 1; var tpl = Template($('#tpl').html()), nextpage = 1, waterfall = new Waterfall.Loader( { container : "#ColumnContainer", load : function(success, end) { $('#loadingPins').show(); TOP.api('tql','get','select title,pic_url,click_url from taobao.taobaoke.items.coupon.get where nick=hnhcc39 and keyword=雪纺 and page_size=20 and page_no='+page_no ,function(resp){ if (page_no > resp.taobaoke_items_coupon_get_response.total_results/20) { end(); return; } page_no = page_no + 1; if(resp){ var items = []; S.each(resp.taobaoke_items_coupon_get_response.taobaoke_items.taobaoke_item,function(item){ items.push(new S.Node(tpl.render(item))); }); success(items); }else{ alert('load data error!'); end(); return; }}); }, minColCount : 2, colWidth : 228 }); // scrollTo 添加点击事件返回顶部 $('#BackToTop').on('click', function(e) { e.halt(); e.preventDefault(); $(window).stop(); $(window).animate({ scrollTop:0 },1,"easeOut"); }); }); </script> <style> .ks-waterfall { position: absolute; left:-9999px; top:-9999px; } </style> </head> <body> <div id="wrapper"> <div id="button_container"></div> <div id="article"> <div id="ColumnContainer"></div> <a id="BackToTop" href="#">Scroll to Top</a> <div id="loadingPins"><img src="http://d3io1k5o0zdpqr.cloudfront.net/images/BouncingLoader.gif" alt="Pin Loader Image"/><span>Fetching pins…</span></div> </div> </div> <script type="tpl" id="tpl"> <div class="pin ks-waterfall"> <a href="{{click_url}}" target="_blank" class="image" > <img height="200" width="200" alt="{{title}}" src="{{pic_url}}" /> </a> </div> </script> </body> </html>
这里数据是通过淘宝jssdk取过来的，搜索“雪纺”关键字的一些商品，然后遍历商品放入tpl这个模板中，当拉动下拉条时，执行下一页！
这个demo比较简单，就说一个S.each(list,function)，这个方法吧！这个就是遍历list的商品！然后的把list中的每一个商品放入到tpl这个模板中。模板中的title之类的为商品的属性！
这些属性的名字可以从接口中了解到！至于模板要做成什么样，那就看个人喜好了，你可以放入图片，图片上再做一个遮罩，也可以在模板上写上对应的事件！
给一个效果图吧！
