|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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="http://www.zzsky.cn/effect/images/mootools.js"></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('p').getSize().x; //缓存内容块的宽度 this.items = $$('#' + this.id + ' p.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> <p id="trust"> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/5443.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/2-09111Z94620.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/0312162V345.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/031215442A6.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/252.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/234.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/78_104229_1.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20070827110712610.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20081223023348557968.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/19014.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20090405041908238537.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/renwu_039.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/211063531J.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20081223021545360846.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/192215324L8.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/5443.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/2-09111Z94620.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/0312162V345.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/031215442A6.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/252.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/234.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/78_104229_1.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20070827110712610.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20081223023348557968.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/19014.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20090405041908238537.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/renwu_039.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/211063531J.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20081223021545360846.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/192215324L8.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/5443.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/2-09111Z94620.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/0312162V345.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/031215442A6.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/252.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/234.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/78_104229_1.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20070827110712610.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20081223023348557968.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/19014.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20090405041908238537.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/renwu_039.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/211063531J.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/20081223021545360846.jpg"></p> <p class="block"><img src="http://www.zzsky.cn/effect/images/201004122000/192215324L8.jpg"></p> </p> </body> </html> |