动态METRO瀑布型布局代码,JS代码库,德仔网

代码语言
代码分类
【JS】动态METRO瀑布型布局
作者:kingapple / 发布于2013/8/5/ 542

	<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>METRO瀑布流</title>
	<script>

	(function(win){
	
	//格子规格
	var grid_norm = {
	 "0" : function(){
	 return {w : 75,h : 75}
	 },
	 "1" : function(){
	 return {w : 75,h : 75}
	 },
	 "2" : function(){
	 return {w : 75,h : 75}
	 },
	 "3" : function(){
	 return {w : 155,h : 75}
	 },
	 "4" : function(){
	 return {w : 155,h : 155}
	 },
	 "5" : function(){
	 return {w : 155,h : 235}
	 },
	 "6" : function(){
	 return {w : 235,h : 75}
	 },
	 "7" : function(){
	 return {w : 235,h : 155}
	 },
	 "8" : function(){
	 return {w : 235,h : 235}
	 }
	}
	
	win.onload = function(){metroLayout();}
	
	function metroLayout(){
	 var g_num = 50 , //创建元素数个数
	 grid_arr = [] , //创建元素集
	 main_el = document.getElementById("main") ,
	 body_w = document.documentElement.offsetWidth ,
	 temporary_el , //临时元素
	 temporary_norm , //临时规格
	 randomMath = 9 ,
	 respon_w = 240,
	 mininum = 80 , //格子的规格
	 filled = [] , //已填充集
	 now_point = [0,0] , //当前坐标
	 now_fill_num , //当前填充数
	 hitResult ; //碰撞结果;
	
	 //计算住容器宽
	 main_el.style.width = (body_w - body_w%respon_w - 240 > 480 ? body_w - body_w%respon_w - 240 : 480) + "px";
	 //计算列数
	 var row_num = parseInt(main_el.style.width)/mininum - 1;
	
	 for(var i = 0 ; i < g_num ; i++){
	 temporary_el = document.createElement("div");
	 temporary_norm = Math.random()*randomMath | 0;
	 temporary_el.style.width = grid_norm[temporary_norm]().w + "px";
	 temporary_el.style.height = grid_norm[temporary_norm]().h + "px";
	 temporary_el.setAttribute("class","grid");
	 if(document.all){
	 temporary_el.style.position = "absolute";
	 temporary_el.style.backgroundColor = "#000";
	 }
	 main_el.appendChild(temporary_el);
	 grid_arr.push(main_el.childNodes[i]); //元素节点存到数组中
	 now_fill_num = filled.length;
	 hitResult = true;
	 if(i == 0){ //如果是第1个元素
	 grid_arr[i].style.left = 0;
	 grid_arr[i].style.top = 0;
	 self_fill(grid_arr[i],filled,row_num);
	 //alert(now_point);
	 }else{ //如果不是第1个元素
	 while(hitResult){
	 occupy(filled,now_point,now_fill_num,grid_arr[i],row_num);
	 //alert(now_point + " " + i);
	 for(var j = 0 ; j < i ; j++){
	 //检测碰撞情况
	 if(hitTest(now_point,grid_arr[i],grid_arr[j]))break;
	 if(j == i-1) hitResult = false;
	 }
	 }
	 grid_arr[i].style.left = now_point[0]*mininum + "px";
	 grid_arr[i].style.top = now_point[1]*mininum + "px";
	 filled = self_fill(grid_arr[i],filled,row_num);
	 }
	 main_el.style.height = mainHeight(filled,mininum) + "px";
	 now_point = [0,0];
	 }
	 //alert(filled.join("|"));
	
	 //主容器高度
	 function mainHeight(fill,minum){
	 var max_height;
	 if(fill.length > 1){
	 for(var i = 0 ; i < fill.length ; i++){
	 if(i != 0)max_height = fill[i][1] > fill[i-1][1] ? fill[i][1] : fill[i-1][1];
	 }
	 }else{
	 return minum;
	 }
	 return max_height*minum;
	 }
	
	 //检测占位
	 function occupy(fill,point,len,obj,r_num){
	 var occupied = true ;
	 while(occupied){
	 point[0] ++;
	 if (point[0] > r_num){
	 point[0] = 0;
	 point[1] ++;
	 }
	 for(var k = 0 ; k < len ; k++){
	 if(fill[k][0] == point[0] && fill[k][1] == point[1])break;
	 //没有被占位且当前元素不会发生溢出
	 if(k == len - 1 && (parseInt(obj.style.width) / 80) + point[0] <= r_num + 1) occupied = false;
	 }
	 }
	 return point;
	 }
	
	 //填充入集
	 function self_fill(a,b,c){
	 var x = parseInt(a.style.left) / 80,
	 y = parseInt(a.style.top) / 80,
	 w = (parseInt(a.style.width) + 5) / 80,
	 h = (parseInt(a.style.height) + 5) / 80,
	 k,
	 d,
	 g,
	 temp_arr = [],
	 len,
	 len_temp;
	
	 //复制一个块集的副本
	 for(var member in b)
	 temp_arr[member] = b[member];
	
	 //给块集加入新的成员
	 for(var n = 0 ; n < h ; n++){
	 for(var m = 0 ; m < w ; m++){
	 b.push([m+x,n+y]);
	 }
	 }
	
	 len = b.length;
	 //如果块集的长度过小 终止函数
	 if(len <= 1) return;
	 len_temp = temp_arr.length;
	
	 //给集重新排序
	 for(var i = len_temp ; i < len ; i++){
	 k = 0;
	 for(var j = 0 ; j < temp_arr.length ; j++){
	 if(b[i][1] > temp_arr[j][1])k++;
	 else if(b[i][1] == temp_arr[j][1] && b[i][0] > temp_arr[j][0])k++;
	 }
	 temp_arr.splice(k,0,b[i]);
	 }
	
	 //删除整排
	 /*for(var t = 0 ; t < len ; t++){
	 alert(g);
	 if(t != 0 && t%c == 0){
	 g++;
	 d = 0;
	 }
	 if(temp_arr[t][1] == 0)d++;
	 if(d == c)temp_arr.splice(temp_arr[t - c],c);
	 }
	 */
	 b = [];
	 //alert(b.join("|"));
	 b = temp_arr;
	 //alert(b.join("|"));
	 return b;
	 }
	
	 //检测碰撞 MB方块检测都搞这么久
	 function hitTest(a,b,c){
	 var x_pmin = a[0] * 80,
	 y_pmin = a[1] * 80,
	 x_pmax = x_pmin + parseInt(b.style.width) + 5,
	 y_pmax = y_pmin + parseInt(b.style.height) + 5,
	 x_omin = parseInt(c.style.left),
	 y_omin = parseInt(c.style.top),
	 x_omax = x_omin + parseInt(c.style.width) + 5,
	 y_omax = y_omin + parseInt(c.style.height) + 5,
	 w_now = (x_pmax>x_omax?x_pmax:x_omax) - (x_pmin<x_omin?x_pmin:x_omin),
	 h_now = (y_pmax>y_omax?y_pmax:y_omax) - (y_pmin<y_omin?y_pmin:y_omin),
	 w_max = parseInt(b.style.width) + parseInt(c.style.width) + 10,
	 h_max = parseInt(b.style.height) + parseInt(c.style.height) + 10;
	
	 if(w_now < w_max && h_now < h_max) return true;
	 else return false;
	 }
	}
	
	})(window)

	</script>
	<style>
	body{margin:0;}
	#main{margin:0 auto;position:relative;}
	.grid{background:#000;opacity:0.5;filter:alpha(opacity = 50);position:absolute;}
	</style>
	</head>
	<body>
	<div id="main"></div>
	</body>
	</html>
评论列表
本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
　动态METRO　
同语言下
可能有用的
kingapple贡献的其它代码(1)
.动态METRO瀑布型布局