javascript模仿百万格子小的一小段代码

关键是得出每个图片的坐标位置，这只是一个简单的实现，更百万格子的功能还相差甚远。

Untitled Document

*{margin:0px;padding:0px}
table#tab{
border:solid #ccc;
border-width:1px 0px 0px 1px;
}
table#tab tr td{
border:solid #ccc;
border-width:0px 1px 1px 0px;
}

function fnMakeTb(){ //生成表格100行50列，实际宽度为20（边框1+宽19）
var sTabStr="

";

}
tempStr+="

"
sTabStr+=tempStr;

}
document.getElementById("aa").innerHTML=sTabStr; //输出表格

}

var iCurX=0; //当前可用x坐标
var iCurY=0; //当前可用y坐标
var iMaxY=0; //当前最大y值
function fnLocatePic(url){
var obj=document.createElement("IMG");
obj.src=url;
//获取图片的宽高
var w=obj.width;
var h=obj.height;
//计算占用格子的宽高，必须是20的倍数
var divW=(w%20>1?(Math.floor(w/20)*20+20):w);
var divH=(h%20>1?(Math.floor(h/20)*20+20):h);

var x,y; //当前元素（图片）的坐标
if(iCurX+divW>1000){ //当前行的格子使用完，换行显示，x重新从0开始计，更新当前y值为最大y值
x=0;
y=iCurY=iMaxY;

}else{
x=iCurX;
y=iCurY;

}
iCurX=x+divW; //计算下一个元素（图片）x坐标
if(y+divH>iMaxY){
iMaxY=y+divH; //将当前最大y值赋予iMaxY

}
document.write("

");

}

fnMakeTb(50,50,1);
fnLocatePic("http://gg.blueidea.com/2006/chinaok/208x32.gif");
fnLocatePic("http://bbs.blueidea.com/images/blue/newtopic.gif");
fnLocatePic("http://bbs.blueidea.com/images/blue/smilies/biggrin.gif");
fnLocatePic("http://bbs.blueidea.com/images/blue/reply.gif");
fnLocatePic("http://bbs.blueidea.com/images/blue/discuz_icon.gif");
fnLocatePic("http://bbs.blueidea.com/images/blue/logo.gif");
fnLocatePic("http://gg.blueidea.com/logo/netfriends/logo.gif");
fnLocatePic("http://gg.blueidea.com/logo/computerarts/logo.gif");
fnLocatePic("http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg");
fnLocatePic("http://gg.blueidea.com/2006/qihoo/blueidea.gif");
fnLocatePic("http://gg.blueidea.com/2006/chinaok/468x60.gif");
fnLocatePic("http://pages.blueidea.com/articleimg/2006/12/1399/preview_s01.jpg");
fnLocatePic("http://gg.blueidea.com/desk/2006/002.jpg");
fnLocatePic("http://www.blueidea.com/articleimg/2006/09/4088/00.gif");
fnLocatePic("http://gg.blueidea.com/logo/netfriends/logo.gif");
fnLocatePic("http://gg.blueidea.com/logo/computerarts/logo.gif");
fnLocatePic("http://bbs.blueidea.com/customavatars/hutia.gif");
fnLocatePic("http://bbs.blueidea.com/images/blue/smilies/frown.gif");
fnLocatePic("http://bbs.blueidea.com/images/blue/smilies/cool.gif");
fnLocatePic("http://bbs.blueidea.com/images/blue/alipay_icon.gif");
fnLocatePic("http://www.blueidea.com/gg/blueidea/2004/painter.jpg");
fnLocatePic("http://www.blueidea.com/articleimg/2003/07/425/2003.gif");

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]