网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

超酷的瀑布流特效动画

关注我吧
 2012/7/26 11:55:26 阅读次数:4131

Demo地址:http://www.ok22.org/download/jspubuliu.html

image

(一)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,安全沙箱,打包工具,自动化脚本等。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭