Demo地址：http://xueduany.github.com/KitJs/KitJs/demo/Waterfall/demo.html

（一）KitJs瀑布流組件特點(diǎn)

1. 瀑布流形式呈現(xiàn)圖片加載，鼠標(biāo)滾動到底加載新的數(shù)據(jù)

2. 瀑布條數(shù)隨窗口大小改變而改變，支持任意縮放窗口

（二）使用方法

core需要引用kit.js，IE下通過條件注釋引入ieFix.js

其他需要引入

array.js 數(shù)組擴(kuò)展（可以不引用）

anim.js 動畫擴(kuò)展即可，

至于demo中的semitransparentloading.js是用來做半透明loading的，io.js是用來跨域取圖片數(shù)據(jù)的，這個(gè)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)  
        }  
    });  
 

指定一個(gè)容器，一個(gè)加載數(shù)據(jù)的方法，最小瀑布列數(shù)，瀑布寬度（這個(gè)是固定的）

在加載方法里面，初始化單個(gè)圖片容器的Dom節(jié)點(diǎn)，需要顯示指明節(jié)點(diǎn)高度，將height,domNode放入一個(gè)數(shù)組中，調(diào)用load方法的回調(diào)參數(shù)succes

（三）自定義事件

目前支持三個(gè)自定義事件，load觸發(fā)之前會有一個(gè)load事件，還有縮放窗口的時(shí)候，有resizeBegin和resizeEnd事件，可以用來做loading動畫。

經(jīng)過幾個(gè)月的努力，現(xiàn)在kit已經(jīng)有了完整的底層以及基礎(chǔ)UI控件體系，包括

1. 完整的dom api

2. 強(qiáng)化的anim動畫類，支持所有的Css動畫，包括Css3以及IE Hacker

3. 平衡了IE與W3C的range對象了，完美兼容了W3C的所有的api，實(shí)現(xiàn)了跨瀏覽器的bookmark同步

4. 完整的OO體系，屬性getter,setter，對象繼承，單例，模塊

5. 強(qiáng)大的模板系統(tǒng)，支持循環(huán)，if else條件判斷

6. 齊全的瀏覽器偵測，手持設(shè)備，PC等等

7. 基礎(chǔ)的UI體系，可以支持復(fù)雜的頁面組件

包括不限于,蒙版，浮動層，對話框，拖拽，高級自定義增強(qiáng)事件，增強(qiáng)動畫，日歷，表單，驗(yàn)證，瀑布流...

8. 基礎(chǔ)的log，安全沙箱，打包工具，自動化腳本等。

原文鏈接：http://www.cnblogs.com/xueduanyang/archive/2012/06/15/2550062.html

【編輯推薦】

1. 中文前端UI框架Kit:搖頭動畫
2. JavaScript圖片變換效果(IE only)
3. JavaScript提升網(wǎng)頁加載速度
4. JavaScript馬賽克遮罩圖片幻燈片切換類
5. 看JavaScript如何實(shí)現(xiàn)頁面自適