Demo地址：http://xueduany.github.com/KitJs/KitJs/demo/Waterfall/demo.html
（一）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，安全沙箱，打包工具，自动化脚本等。
原文链接：http://www.cnblogs.com/xueduanyang/archive/2012/06/15/2550062.html
【编辑推荐】
