<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>紧贴布局的序列化内容块</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:0 0 5px;
}
#trust{
position:relative;
margin:5px auto;
}
.block{
float:left;
width:170px;
min-height:100px;
padding:5px;
}
.block img{
display:block;
width:160px;
padding:5px;
border:1px solid #666;
}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
var Serialization = new Class({
initialize: function(id){
this.id = id; //外部容器id
this.box = $(id); //外部容器，通过mootools封装为Element对象
this.mod_width = this.box.getElement('div').getSize().x; //缓存内容块的宽度
this.items = $$('#' + this.id + ' div.block'); //缓存内容块数组.通过mootools选择器封装为Element对象
this.max_col = 0; // 初始化一个最大列数
},
run:function(){
var _this = this; //缓存对象
var arr = []; //新建一个数组，用以保存每列的宽度
var win_width = $(window).getSize().x; //获取当前窗口宽度
var max_col = win_width % this.mod_width == 0 ? win_width / this.mod_width : Math.ceil(win_width / this.mod_width) - 1; //计算最大列数
this.box.setStyle('width',this.mod_width * max_col); //设置外部容器宽度
if(max_col == this.max_col){ //如果当前可容纳的最大列数等于以缓存的最大列数，返回
return false;
}
this.max_col = max_col; //缓存最大列数
for(var i = 0 ; i < max_col ; i++){ //初始化数组的内容
arr.push(0);
};
this.items.each(function(item , index){ //循环内容块数组，进行排列
var n = 0; //初始化一个最小高度列
for(var i = 0 , len = arr.length ; i < len ; i++){ //通过循环数组得到最小高度列（这个还在想怎么改进算法）
n = arr[n] <= arr[i] ? n : i;
}
item.setStyle('position','absolute'); //赋予内容块绝对定位（这个还在想怎么改进）
new Fx.Tween(item).start('left',n * _this.mod_width + 'px'); //设置内容块的横向移动目标，开始移动
new Fx.Tween(item).set('top',arr[n] + 'px'); //设置内容块的纵向移动目标，开始移动
arr[n] = arr[n] + item.getSize().y - 0; //更新当前所在列的高度
n = null; //清空变量
})
var n = 0; //初始化一个最大高度列
for(var i = 0 , len = arr.length ; i < len ; i++){ //通过循环数组得到最大高度列（这个还在想怎么改进算法）
n = arr[n] >= arr[i] ? n : i;
};
new Fx.Tween(this.box).set('height',arr[n]); //设置外部容器高度
arr = null; //清空变量
n = null; //清空变量
win_width = null; //清空变量
}
});
window.addEvent('load', function(){
var serialization = new Serialization('trust'); //初始化一个新的序列对象
serialization.run(); //执行序列对象的run方法
if(Browser.Engine.trident){ //判断是否IE，如果是IE则把resize事件绑定在外部容器
serialization.box.addEvent('resize',function(){
serialization.run();
});
}else{ //否则绑定在window对象上
window.addEvent('resize',function(){
serialization.run();
});
}
});
</script>
</head>
<body>
<div id="trust">
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
<div class="block"><img src=""></div>
</div>
</body>
</html>
