The key is to get the coordinates of each picture, this is just a simple implementation, the function of millions of squares is still far from the difference.
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pead> ; <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 () {//Generate table 100 rows 50 columns with an actual width of 20 (border 1+ Wide) 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; Output table} var icurx=0; Currently available with x-coordinate var icury=0; Currently available y-coordinate var imaxy=0; The current maximum Y-value function fnlocatepic (URL) {var obj=document.createelement ("IMG"); Obj.src=url; Get the picture of the wide-high var w=obj.width; var h=obj.height; The computation occupies the width height of the lattice, must be a multiple of 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; The coordinates of the current element (picture) (icurx+divw>1000) {//When the front grid is used up, line-wrapping shows, X restarts from 0, and updates the current Y-value to the maximum Y-value x=0; Y=icury=imaxy; }else{X=icurx; Y=icury; } ICURX=X+DIVW; Computes the next element (picture) x coordinate if (y+divh>imaxy) {IMAXY=Y+DIVH; Assigns the current maximum Y value to Imaxy} document.write ("<div style=\" position:absolute;width: "+divw+" Px;height: "+divh+" Px;top: "+y+" Px;left: "+x+" px;\ ">&L"T;/div> "); } </script> </pead> <body> <div id= "AA" > <script type= "Text/javascrip T "> Fnmaketb (50,50,1); Fnlocatepic ("Yun_qi_img/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 ("Yun_qi_img/logo.gif"); Fnlocatepic ("Yun_qi_img/logo.gif"); Fnlocatepic ("http://pages.blueidea.com/articleimg/2007/01/1403/preview_s01.jpg"); Fnlocatepic ("Yun_qi_img/blueidea.gif"); Fnlocatepic ("Yun_qi_img/468x60.gif"); Fnlocatepic ("http://pages.blueidea.com/articleimg/2006/12/1399/preview_s01.jpg"); Fnlocatepic ("yun_qi_img/002.jpg"); Fnlocatepic ("Yun_qi_iMg/00.gif "); Fnlocatepic ("Yun_qi_img/logo.gif"); Fnlocatepic ("Yun_qi_img/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 ("yun_qi_img/painter.jpg"); Fnlocatepic ("Yun_qi_img/2003.gif"); </script> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
