Demo地址：http://xueduany.github.com/KitJs/KitJs/index.html#waterfall
（一）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