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("调整完毕");
}
});
});
});
分享到:
相关推荐
KISSY库,可以实现瀑布留效果。 - build: 构建好的发布文件 - docs: API 文档 - src: 源码、测试等开发资源 - tools: 打包压缩等自动化工具 瀑布流效果在src\waterfall\demo.html
是利用kissy提供的插件做出来的瀑布流布局,因为之前的项目很大,文件很大,我不能把整个项目拷上来吧,so,所以我把主要的东西整理下发上去,这个直接运行是看不到效果的,因为读取数据那部分要你自己去写(到你...
这个demo是以前做的一个项目拷贝下来的,是利用kissy提供的插件做出来的瀑布流布局,因为之前的项目很大,文件很大,我不能把整个项目拷上来吧,so,所以我把主要的东西整理下发上去,这个直接运行是看不到效果的,...
kissy 开源瀑布流,完整异步加载模拟效果(php后端)
淘宝kissy帮助文档 学习文档 用法等
Kissy学习教程.rarKissy学习教程.rarKissy学习教程.rarKissy学习教程.rar
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。 KISSY ...
KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全...
KISSY框架是目前硕果仅存的几个国产js框架之一,在阿里的网站比如淘宝网、天猫等大量使用。
kissy-1.4.8.zip,淘宝最新前端开发包
KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架
js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。
Kissy 15天学会.zip欢迎下载!!!
Web常用UI库 kissy ,kissy 是淘宝一个开源的 JavaScript 库,包含的组件有:日历、图片放大镜、卡片切换、...
淘宝帮派编辑器 kissy editor 2.0
KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件。目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布...
高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。
异步上传组件uploader基于kissy,拥有flash,iframe,html5三种方式
高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。