重要なのは、各画像の座標位置を取得することです。これは単なる実装であり、何百万ものグリッドの機能とは程遠いです。 ç¡é¡ã®ããã¥ã¡ã³ã *{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; } [Ctrl A ãã¹ã¦é¸æ 注: å¤é¨ Js ãå°å ¥ããå¿ è¦ãããå ´åã¯ã 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 は 100 万平方分の小さなコードを模倣します_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");