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("调整完毕"); } }); }); });