瀑布流的实现

用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&hellip;</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之类的为商品的属性！

这些属性的名字可以从接口中了解到！至于模板要做成什么样，那就看个人喜好了，你可以放入图片，图片上再做一个遮罩，也可以在模板上写上对应的事件！

给一个效果图吧！

posted @ 2012-07-10 09:49  何长春  阅读(254)  评论(0)  编辑  收藏  举报