碎片整合 例子

<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			div{
				float:left;
			}
		</style>

初始版

<script type="text/javascript">	
			var oBody = document.getElementsByTagName("body")[0];
			window.onresize = function(){
				create();
			}
			create();
			function create(){
				oBody.innerHTML = "";
				var ele = "";
				var boxWid = Math.floor((document.documentElement.clientWidth||document.body.clientWidth)/10);
				var boxHei = Math.floor((document.documentElement.clientHeight||document.body.clientHeight)/10);
				for(var i=0;i<100;i++){
					ele+= "<div style='background:rgb("+Math.floor(256*Math.random())+","+Math.floor(256*Math.random())+","+Math.floor(256*Math.random())+");"+boxWid+"px;height:"+boxHei+"px;'></div>";
				}
				oBody.innerHTML = ele;
			}
		</script>

　　

　　

改进版

<script>
			var obody = document.getElementsByTagName("body")[0];
			create();
			window.onresize = function(){
				create();
			}
			function create(){
				var pice = document.createDocumentFragment();//碎片整合
				obody.innerHTML = "";
				var wid = document.documentElement.clientWidth||document.body.clientWidth;//可用宽度
				var hei = document.documentElement.clientHeight||document.body.clientHeight;
//				var boxWid = Math.floor(wid/10);//每行放10个box 向下取整 放不下的时候9个
//				var boxHei = Math.floor(hei/10);
				var boxWid = wid/10;
				var boxHei = hei/10;
				for(var i=0;i<100;i++){
					var oDiv = document.createElement("div");//每循环一次创建一个div
					oDiv.style.background = "rgb("+Math.floor(256*Math.random())+","+Math.floor(256*Math.random())+","+Math.floor(256*Math.random())+")";//背景色随机 0-256不包括256 
　　　　　　　　　　　　　　　　　　　　　　
					if(i%10==0){
						boxWid = wid - 9*boxWid;
					}
					if(i>=90){
						boxHei = hei - 9*boxHei;
					}
					oDiv.style.width = boxWid + "px";
					oDiv.style.height = boxHei + "px";
					pice.appendChild(oDiv);//考虑性能问题 先都放到pice里面然后在 把pice放到obody中
				}
				obody.appendChild(pice);
			}
		</script>