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

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

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">*{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;}</style><script type="text/javascript"> function fnMakeTb（）{//生成表格100行50列，实际宽度为20（边框1+宽19）var sTabStr="<table cellpadding="0" cellspacing="0" id="tab">";for（var i=0;i<100;i++）{var tempStr="<tr>";for（var j=0;j<50;j++）{tempStr+="<td style="width:19px;height:19px"> </td>";}tempStr+="</tr>"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（"<img src="+url+" />"）; }</script></head><body><script type="text/javascript">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"）;</script></body></html>

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