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

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

<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\"> "; } 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("<div style=\"position:absolute;width:"+divW+"px;height:"+divH+"px;top:"+y+"px;left:"+x+"px;\"><img src="+url+" / alt="javascript模仿百万格子小的一小段代码_javascript技巧" ></script>

"); }

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