超酷的瀑布流特效动画-幸凡学习网

超酷的瀑布流特效动画

用声音读出全文

关注我吧

2012/7/26 11:55:26 阅读次数:8351Tags:js 瀑布流

Demo地址：http://www.ok22.org/download/jspubuliu.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体系，可以支持复杂的页面组件