kissy瀑布流学习笔记

 

KISSY 是由淘宝前端攻城师们发起创建的一个开源 JS 类库。

她遵循的原则是 小巧灵活、简洁实用、愉悦编码、快乐开发。

本次主要是使用kissy的waterfall 实现瀑布流效果。 

 

 

首先是查看了kissy的介绍和api文档，了解了大致的用法，然后下载了waterfall的demo到本地运行测试，最后将代码移植在自己的项目中使用。

 

基本的介绍和使用，api里都有说明，这里主要说说遇到的问题

kissy和jquery类似，首页要引入基础的js库也就是kissy.js，然后在根据自己使用中用的功能引用不同的js，如果我这里要使用瀑布流，并且是动态加载的。所以就引用了base.js loader.js waterfall.js这些demo中都有，当然有了这些js文件，瀑布流的效果已经可以实现。可以对一个最基本的板块进行瀑布流排版

如：

 

KISSY.use("waterfall", function (S, Waterfall) {

      new Waterfall({

        container: "#ColumnContainer", //节点容器

        minColCount: 4,

        colWidth: 320 //每列的宽度

      });

    });

 

 

具体配置参数，参考api文档。

但发现demo上，是可以动态加载数据的，并且发现kissy提供一个内容模版的功能，可以设定好动加载数据的模版，网模版里填写数据即可，这个需要用到template.js，也是一个非常使用的插件。

demo里的这段代码就是模版

 

<script type="tpl" id="tpl">
  <div class="pin ks-waterfall" data-id="">
    <a href="#" class="image">
      <img height="{{height}}" alt="" src="{{photopath}}"/>
    </a>
    <p class="description"></p>
    <p>
      <button class="del">删除</button>
      <button class="grow">增高</button>
    </p>
  </div>
</script>

 

 

 

里面被"{{","}}"这个包含的都会被动态加载返回的json数据里的同名替换成对应的值。对于需要动态加载数据的需要Waterfall.Loader，直接在代码中备注说明吧

（ demo中的html并没有引入template.js仍可以使用，但我一直到自己的工程就必须在页面上引入这个js，还有就是demo有用到Button这个插件，但我引入button.js后仍然不能正常运行，最后只好将Button这个给去掉就正常了，原因不清楚，如有高人知道，请赐教 ）最后使用修改后的js备注说明

 

KISSY.use("waterfall,ajax,template", function (S, Waterfall, io, Template) {
      var tpl = Template($('#tpl').html()); //定义内容模版
      var nextpage = 1;
        var waterfall = new Waterfall.Loader({
            container: "#ColumnContainer", //节点容器 
            adjustEffect:{
              duration:0.5,
              easing:"easeInStrong"
            },
            diff :10, //api文档中如此解释  滚动时, 当最小高度的列超过在屏幕高度+已滚动高度+diff时, 会去加载更多数据 ，发现如果不加此值，拖动滚动条是，不会自动加载更多


            load:function (success, end) {
              $('#loadingPins').show();
              S.ajax({
                data:{
                  'from':'water',
                  'page':nextpage,
                  'per_page':20,
                  'format':'json'
                },
                url:'/photo/photos.ydd',
                dataType:"json",
                /*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, function (item) {
                    item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height  设置瀑布流假的高度，每个高度不一样，做出瀑布流的效果
                    items.push(tpl.render(item));  //tpl.render(item) 前面提到的通过模版生成内容。
                  });
                  success(items);
                },
                complete:function () {
                  $('#loadingPins').hide();
                }
              });
            },
            minColCount:2,
            colWidth:228
          });

          waterfall.on('adjustComplete', function () {
            S.log('after adjust complete!');
          });
          waterfall.on('addComplete', function () {
            S.log('after add complete!');
          });
          // scrollTo
          $('#BackToTop').on('click', function (e) {
            e.halt();
            e.preventDefault();
            $(window).stop();
            $(window).animate({
              scrollTop:0
            }, 1, "easeOut");
          });

          $("#ColumnContainer").on("click", ".del", function (event) {

            var w = $(this).parent().parent(".ks-waterfall");
            waterfall.removeItem(w, {
              callback:function () {
                alert("删除完毕");
              }
            });
          });


          $("#ColumnContainer").on("click", ".grow", function (event) {
            var w = $(this).parent().parent(".ks-waterfall");
            waterfall.adjustItem(w, {
              process:function () {
                w.append("<img src='http://farm9.static.flickr.com/8167/7688895968_25ed78629e_m.jpg' width='220' height='200px;'>");
              },
              callback:function () {
                alert("调整完毕");
              }
            });
          });

    });