block-animate-by-css3

by 兵兵 王

HTML

<script src="http://www.css88.com/doc/underscore/underscore.js"></script>
<div class="container">
	<span class="block bg_type1">1</span>
	<span class="block bg_type1">2</span>
	<span class="block bg_type1">3</span>
	<span class="block bg_type1">4</span>
	<span class="block bg_type2">5</span>
	<span class="block bg_type2">6</span>
	<span class="block bg_type2">7</span>
	<span class="block bg_type2">8</span>
	<span class="block bg_type3">9</span>
	<span class="block bg_type3">10</span>
	<span class="block bg_type3">11</span>
	<span class="block bg_type3">12</span>
	<span class="block bg_type4">13</span>
	<span class="block bg_type4">14</span>
	<span class="block bg_type4">15</span>
	<span class="block bg_type4">16</span>
</div>

<!--<div class="btn_group">
	<span class="btn filter1">1,3,4</span>
	<span class="btn filter2">2,4</span>
	<span class="btn filter3">3</span>
	<span class="btn filter4">all</span>
</div>-->

<div class="sort">sortBtn</div>

CSS

.block {
	width: 100px;
	height: 100px;
	float: left;
	margin: 10px 0 0 10px;
	line-height: 100px;
	text-align: center;
	display: none;
}
.container {
	margin: 0 auto;
	width: 450px;
	height: 450px;
	border: 1px solid #ccc;
	position: relative;
}
.block.show {
	display: block;
}
.bg_type1 {
	background: #584;
}
.bg_type2 {
	background: #842;
}
.bg_type3 {
	background: #49c;
}
.bg_type4 {
	background: #a45;
}

.block {
	-webkit-transition: top 1s,left 1s;
	-o-transition: top 1s,left 1s;
	transition: top 1s,left 1s;
}
.btn_group {
	margin: 10px auto;
}
.btn {
	display: inline-block;
	width: 100px;
	height: 30px;
	line-height: 30px;
	background: #ccc;
	text-align: center;
}

.sort {
	margin: 10px auto;
	width: 100px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #c58;
}

JavaScript

function ZxAnimate(config) {
	// config: {
	// 	spacing: 10,
	// 	parent: $('.container'),
	// 	children: $('.block')
	// }
	this.init(config);
}
var ZxAnimateProto = ZxAnimate.prototype;
ZxAnimateProto.init = function(config) {
	this.children = config.children;
	this.parent = config.parent;
	this.spacing = config.spacing;
	this.childW = config.childW || this.children.width();
	this.childH = config.childG || this.children.height();
	this.columns = config.columns || (this.parent.width() / this.childW) | 0;
	this.children.addClass('show').css('position', 'absolute');
	this.computePosition();
	console.log(this);
};
ZxAnimateProto.computePosition = function() {
	var self = this;
	// var showingChildren = self.children.filter('.show');
	// showingChildren.each(function(index, child) {
	// 	console.log(arguments);
	// 	var childNum = showingChildren.length,
	// 		line = index / self.columns | 0,
	// 		col = index % self.columns;
	// 	$(child).css({
	// 		'top': line * (self.spacing + self.childH),
	// 		'left': col * (self.spacing + self.childW),
	// 	})
	// })
	var l = self.children.length;
	for (var i = 0; i < l; i++) {
		var child = $(self.children[i]);
		var index = i;
		var childNum = l,
			line = index / self.columns | 0,
			col = index % self.columns;
		$(child).css({
			'top': line * (self.spacing + self.childH),
			'left': col * (self.spacing + self.childW),
		})
	};
}
// ZxAnimateProto.filter = function(typeArr) {
// 	debugger
// 	if (!typeArr || !typeArr.length) {
// 		return;
// 	}
// 	var self = this;
// 	self.children.removeClass('show');
// 	var filterStr = '.bg_type' + typeArr[0];
// 	for (var i = 1; i < typeArr.length; i++) {
// 		filterStr += ',' + '.bg_type' + typeArr[i];
// 	};
// 	var filterChildren = self.children.filter(filterStr);
// 	filterChildren.addClass('show');
// 	self.computePosition();
// }
ZxAnimateProto.sort = function() {
	var self = this;
	self.children = _.shuffle(self.children);
	self.computePosition();
}

var zxAnimate = new...