(一)KitJs瀑布流组件特点
1. 瀑布流形式呈现图片加载,鼠标滚动到底加载新的数据
2. 瀑布条数随窗口大小改变而改变,支持任意缩放窗口
(二)使用方法
core需要引用kit.js,IE下通过条件注释引入ieFix.js
其他需要引入
array.js 数组扩展(可以不引用)
anim.js 动画扩展
即可,
至于demo中的semitransparentloading.js是用来做半透明loading的,io.js是用来跨域取图片数据的,这个load方法可以自定义
最简单的加载方式,比如
var currentPage = 1;
var waterfall = new $kit.ui.Waterfall({
container : $kit.el('.kitjs-waterfall-container')[0],
load : function(success, end) {
//$('#loadingPins').show();
$kit.io.josnp({
url : 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=5d93c2e473e39e9307e86d4a01381266&tags=rose&page=' + currentPage + '&per_page=20&format=json&_ksTS=1339665079110_92&jsoncallback=dealWithJSONPData',
onSuccess : function() {
currentPage = window.loadedData.photos.page + 1;
//alert(window.loadedData.photos.photo.length);
var items = [];
$kit.each(window.loadedData.photos.photo, function(item) {
item.height = Math.round(Math.random() * (300 - 180) + 180);
// fake height
items.push($kit.newHTML($kit.tpl(['<div class="kitjs-waterfall" data-id="${id}">', //
'<a href="http://farm/${farm}.static.flickr.com/${server}/${id}_${secret}_m.jpg" class="image" target="_blank">', //
'<img height="${height}" alt="${title}" src="http://farm/${farm}.static.flickr.com/${server}/${id}_${secret}_m.jpg"/>', //
'</a>', //
'<p class="description">${title}</p>', //
'</div>'//
].join(''), item)).childNodes[0]);
});
success(items);
window.timeoutLoading = setTimeout(function() {
if(window.loading) {
window.loading.destory();
window.loading = null;
}
}, 600)
}
})
},
minColCount : 2,
colWidth : 228
});
waterfall.ev({
ev : 'loadData',
fn : function() {
if(window.timeoutLoading) {
clearTimeout(window.timeoutLoading);
window.timeoutLoading = null;
}
if(window.loading == null) {
window.loading = new $kit.ui.SemitransparentLoading();
}
}
});
waterfall.ev({
ev : 'resizeBegin',
fn : function() {
if(window.timeoutLoading) {
clearTimeout(window.timeoutLoading);
window.timeoutLoading = null;
}
if(window.loading == null) {
window.loading = new $kit.ui.SemitransparentLoading();
}
}
});
waterfall.ev({
ev : 'resizeEnd',
fn : function() {
window.timeoutLoading = setTimeout(function() {
if(window.loading) {
window.loading.destory();
window.loading = null;
}
}, 600)
}
});
指定一个容器,一个加载数据的方法,最小瀑布列数,瀑布宽度(这个是固定的)
在加载方法里面,初始化单个图片容器的Dom节点,需要显示指明节点高度,将height,domNode放入一个数组中,调用load方法的回调参数succes
(三)自定义事件
目前支持三个自定义事件,load触发之前会有一个load事件,还有缩放窗口的时候,有resizeBegin和resizeEnd事件,可以用来做loading动画
经过几个月的努力,现在kit已经有了完整的底层以及基础UI控件体系,包括
1. 完整的dom api
2. 强化的anim动画类,支持所有的Css动画,包括Css3以及IE Hacker
3. 平衡了IE与W3C的range对象了,完美兼容了W3C的所有的api,实现了跨浏览器的bookmark同步
4. 完整的OO体系,属性getter,setter,对象继承,单例,模块
5. 强大的模板系统,支持循环,if else条件判断
6. 齐全的浏览器侦测,手持设备,PC等等
7. 基础的UI体系,可以支持复杂的页面组件
包括不限于,蒙版,浮动层,对话框,拖拽,高级自定义增强事件,增强动画,日历,表单,验证,瀑布流...
8. 基础的log,安全沙箱,打包工具,自动化脚本等等
欢迎各位对kit有兴趣的朋友加入我们的开源项目,一起建设
分享到:
相关推荐
本文以kitjs对话框组件为例,给我们详细介绍了kitjs的组件目录、默认代码模板、构造器及初始方法、以及Kitjs继承。讲解的非常细致,对我们熟练掌握kitjs组件很有帮助。
Kitjs,(http://xueduany.github.com/KitJs),是我2011年底,离开淘宝UED之后,自己搞起的一套HTML5的前端widget库,原本的用途主攻手机端HTML页面交互组件使用,正如其字面意思Kit一样,愿景是做一个娇小,实用,...
<!DOCTYPE html> <html> <head> <meta ...url=KitJs/index.html" />...中文javascript组件库--Kit</title> </head> <body> </body> </html>
本文详细介绍了Kitjs的事件管理功能,包括普通的Dom事件、Kit如何解决问题、代码解析、注销事件等。需要的朋友可以参考下。
电子、通信、计算机大类学生课程实验的心得体会 电子、通信、计算机大类的学生课程实验是工科教育中非常重要的一环,它不仅能够加深学生对理论知识的理解,还能培养学生的实践能力和创新思维。
【营销】任务一金融产品与金融产品营销认识.docx
1.了解LED数码管的工作原理,为秒表时钟模块的实现打下基础。 LED数码管是一种常用的数字显示器件,通过控制每个LED的亮灭来显示数字。在秒表时钟模块中,我们需要利用LED数码管的这一特性,通过单片机控制数码管的显示,从而实现时钟的功能。因此,了解LED数码管的工作原理对于实现秒表时钟模块至关重要。 2.掌握51单片机与LED数码管的接口技术,是实现秒表时钟模块的关键。 51单片机是一种常用的微控制器,可以通过接口与外部设备进行通信。在秒表时钟模块中,我们需要通过单片机与LED数码管之间的接口,控制数码管的显示。因此,掌握51单片机与LED数码管的接口技术是实现秒表时钟模块的关键。在实际操作中,我们需要根据接口协议和数据传输方式,编写相应的程序来控制数码管的显示。 3.合理利用定时器/计数器,是实现秒表时钟模块的效率保障。 在秒表时钟模块中,我们需要实现计时功能,这需要使用到定时器/计数器。定时器/计数器可以用来产生计时脉冲,从而控制秒表的计时。通过合理利用定时器/计数器,可以提高秒表时钟模块的计时精度和效率。在实际操作中,我们需要根据具体的应用场景和需求,选择合适的定时器/计数器参
个人98分期末大作业项目,代码完整下载可用。主要针对计算机相关专业的正在做课程设计和期末大作业的学生和需要项目实战练习的学习者。包含全部项目源码、该项目可以直接使用、项目都经过严格调试,下载即用确保可以运行!
实验室管理微信小程序设计
机械设计CNC自动打孔机(sw18可编辑+工程图)非常好的设计图纸100%好用.zip
51单片机使用蜂鸣器来播放音乐蜂鸣器播放音乐-小星星亮晶晶 通过PWM信号来控制蜂鸣器,改变PWM的频率,可以改变蜂鸣器的发声音调,从而可以播.适合新手使用
机械设计德国6层电万能蒸烤箱(sw21可编辑+cad)非常好的设计图纸100%好用.zip
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
超声波传感器系列 UFA-150, UFA-200 安装指南
VOS4890 户外电源系统 用户手册
金融产品可行性报告.docx
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
printer.cfg
【计算机二级实操】液晶背光开关控制实验(汇编语言).zip
基于Spring Boot和Vue的音乐网站系统是一种使用Spring Boot框架和Vue框架进行开发的在线音乐平台系统。下面是一个简单的介绍: 后端(Spring Boot)部分: 1. 数据库设计:设计合适的数据库模式来存储音乐信息,包括歌曲、专辑、歌手等相关信息。 2. 接口设计:根据需求设计合适的RESTful API接口,用于处理前端请求。您可以使用Spring MVC来开发这些接口,并使用Spring Data JPA来处理数据库访问。 3. 用户管理:实现用户注册、登录、权限管理等功能。使用Spring Security来处理用户认证和授权。 4. 音乐资源管理:上传/编辑/删除音乐、/删除/编辑/分类专辑和歌手等功能。您可以使用Spring Boot提供的文件上传和管理功能,以及数据库来存储和管理相关信息。 5. 推荐系统:实现根据用户的兴趣和行为进行个性化的音乐推荐。可以使用协同过滤、内容推荐或机器学习等技术来进行推荐算法的实现。 前端(Vue)部分: 1. 页面设计:使用Vue框架用户界面,包括首页、歌单推荐、搜索、歌手页面等。使用Vue Router