Metro風格瀑布流，html5代碼

2024-09-05 12:18:48

字體：大中小

來源：轉載

供稿：網友

Win8覺得成功的就是混搭的方格子瀑布流桌面效果，呵呵，或許其它高級功能我沒玩過，覺得XP還是我的最愛。當Metro上線的時候，就激起了無數的模仿者，現在在WEB設計界，也早見到過這種效果了，但想為你網站增加瀑布流布局效果的，你可要好好學習一下這款HTML5代碼了。

<!doctype html><html><head><title>Metro風兼搭瀑布流</title><style>body{background:#000;}.myMetro{position:relative;overflow:hidden;zoom:1;margin:0 auto;}.MBox{float:left;vertical-align:middle;}.widgetBox{position:relative;display:block;overflow:hidden;width:180px;height:160px;}</style><script src="/jscss/demoimg/201306/extend.js"></script><script>/* 格子排序 */var metro = {};metro.init=function(wrap){	metro.gen={w:190,h:170};	metro.wrap = wrap;	metro.sizeArray= []; //格子,[1,2]就表示1X2的大格子	metro.preset();	metro.putData(wrap);};metro.preset = function(){	metro.nameSpace= {};	metro.maxY = -1;	metro.basePos = {x:0, y:0};	metro.memory = {flag:Infinity, x: Infinity, y:Infinity};	metro.row = document.documentElement.offsetWidth / metro.gen.w >> 0;	metro.wrap.style.width = metro.row * metro.gen.w + "px";};metro.resort=function(){	metro.preset();	metro.mbox = $class("MBox");	metro.sort(metro.sizeArray);};metro.putData = function(list){	(function setBig(){  //大格子初始化設置	 	var bigBox = $class("bigBox",list);	   	if(bigBox.length==0) return false;		var i = 0, nx, ny, bigBoxCont;		while(i < bigBox.length){			bigBoxCont =  $class("innerBox",bigBox[i]);			nx = Math.floor(bigBoxCont[0].offsetWidth / metro.gen.w); //bigBox橫向占的塊數			ny = Math.floor(bigBoxCont[0].offsetHeight / metro.gen.h);			bigBox[i].style.width = nx*metro.gen.w - 10 + 'px' ;			bigBox[i].style.height = ny*metro.gen.h - 10 + 'px' ;			i++;		}	})();	metro.mbox = $class("MBox",list);	var i = 0 , nx, ny, tempSizeArray = [];	while( i < this.mbox.length){		if( $class("bigBox",this.mbox[i]).length > 0 ){			nx = Math.ceil(this.mbox[i].offsetWidth / this.gen.w);			nx = (nx > this.row) ? this.row : nx; //bigBox寬度尺寸過大			ny = Math.ceil(this.mbox[i].offsetHeight / this.gen.h);			tempSizeArray.push([nx,ny]);		}else{			tempSizeArray.push([1,1]);		}		i++;	}	this.sizeArray = this.sizeArray.concat(tempSizeArray);	metro.sort(tempSizeArray);}metro.sort = function(size){	var x = metro.basePos.x,		y = metro.basePos.y,		memory = metro.memory,		name;	for(var n=0; n < size.length ; n++){		if(memory.flag == 0){			x = memory.x;			y = memory.y;		}		memory.flag --;		if(x > metro.row-1){ //換行			x = 0;			y ++;		}		name = x+'_'+y;  //對象屬性名（反映占領的格子）		if(name in this.nameSpace) {  //判斷屬性名是否存在			n--;			x++;			memory.flag < Infinity && memory.flag++;			continue;		}		if(size[n][0] * size[n][1] == 1){  //普通格子			metro.nameSpace[name]=[x,y];  //項值（反映坐標值）			setPos(x,y,n);			x++;		}		else{  //大格子			if(beOver(x,y,size[n])) {				if(memory.y > y){					memory.y = y;					memory.x = x;				}				if(memory.y < Infinity) memory.flag = 1;				n--;				x++;				continue;			}			metro.nameSpace[name] = [x,y];			setPos(x,y,n);			hold(x,y,size[n]);			x += size[n][0];		}		if(memory.flag == -1) memory = {flag:Infinity ,x: Infinity, y:Infinity};		metro.maxY = Math.max(metro.maxY, y + size[n][1]);	}	metro.basePos = {"x":x,"y":y}	metro.memory = memory;	metro.wrap.style.height= metro.gen.h * metro.maxY +'px';	function beOver(x,y,item){  //判斷是否會重疊		var name;		if(x + item[0] > metro.row) return true; //超出顯示范圍		for(var k=1; k<item[1]; k++){			name=x+'_'+(y-0+k);			if(name in metro.nameSpace) return true; //左側一列有無重疊		}		for(k=1; k<item[0]; k++){			name=(x-0+k)+'_'+y;			if(name in metro.nameSpace) return true; //上側一行有無重疊		}		return false;	};	function hold(x,y,item){  //大格子多占的位置		for(var t=0; t < item[0]; t++) {			for(var k=0; k < item[1]; k++){				name = (x+t)+'_'+(y+k);				if(t==0 && k==0)   continue;				metro.nameSpace[name] = 0;   //多占的格子無坐標值			}		}	};	function setPos(x,y,n){		var left = metro.gen.w * x,			top = metro.gen.h * y;		metro.mbox[n].style.cssText += "position:absolute;left:"+ left +"px;top:" + top + "px;";	}};</script></head><body><div   class="iwvjtn8m0"   id="myMetro" class="myMetro"></div><script>//隨機數據var myMetro = $id("myMetro"),	colorList = ['f4b300','78ba00','2673ec','ae113d','632f00','b01e00','4e0038','c1004f','7200ac','2d004e','006ac1','001e4e','008287','004d60','004a00','00c13f','15992a','ff981d','e56c19','b81b1b','ff1d77','b81b6c','aa40ff','691bb8','1faeff','1b58b8','56c5ff','569ce3','00d8cc','00aaaa','91d100','b81b6c','e1b700','d39d09','ff76bc','e064b7','00a4a4','ff7d23','4cafb5','044d91','832772','d15a44','de971b','017802','6e2ea0'],	color = colorList[0];function createTestData(n){	var spanWrap = document.createElement("span"),		content = "";	for(i = 0; i < n; i++) {		color = colorList[(colorList.length * Math.random())>>0];		if(!(Math.random()*3 >> 0)){ //輸出大模塊測試數據。寬高在一個范圍內都是隨意的，未做其他限制			height = Math.floor(Math.random()*320 + 160);			width = Math.floor(Math.random()*360 + 180);			content += '<div   id="iwvjtn8m0"   class="MBox" style="background:#'+color+'"><div   id="iwvjtn8m0"   class="bigBox" ></div></div>';		}else{ //輸出普通模塊數據			content += '<div   id="iwvjtn8m0"   class="MBox" style="background:#'+color+'"></div>';		}	};	spanWrap.innerHTML = content;	myMetro.appendChild(spanWrap);	return spanWrap;}window.onload = function(){	createTestData(35);	metro.init(myMetro);};window.onresize = function(){	metro.resort(myMetro);};window.onscroll=function(){	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop,		windowHeight = document.documentElement.clientHeight,		documentHeight = document.body.offsetHeight;	if(windowHeight + scrollTop > documentHeight - 50){		metro.putData(createTestData(15));	}}</script></body></html>

上一篇：html5 canvas 生成忍者鏢旋轉動畫

下一篇：用HTML5的File API做上傳圖片預覽功能