<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())+");width:"+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>