中文前端UI框架Kit(十四)超酷的瀑布流特效动画

 

Demo地址:http://xueduany.github.com/KitJs/KitJs/index.html#waterfall

中文前端UI框架Kit(十四)超酷的瀑布流特效动画_第1张图片

 

(一)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官方讨论QQ群建立了,QQ群号88093625,欢迎大家加入,讨论前端相关话题

 

另外,我们的产品,Mac版本大名鼎鼎的欧陆词典,招C#开发一名,有兴趣的可以看 http://www.eudic.net/company/joinus_eu.aspx

 

 

你可能感兴趣的:(瀑布流)