javascript模仿百萬格子小的一小段代碼

2019-11-21 01:56:51

字體：大中小

來源：轉載

供稿：網友

關鍵是得出每個圖片的坐標位置，這只是一個簡單的實現，更百萬格子的功能還相差甚遠。

<!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("<div style=/"position:absolute;width:"+divW+"px;height:"+divH+"px;top:"+y+"px;left:"+x+"px;/"><img src="+url+"%20/></div>");%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20</script>%20%20%20%20</head>%20%20%20%20<body>%20%20%20%20%20%20<div%20id="aa">%20%20%20%20%20%20<script%20type="text/javascript">%20%20%20%20%20%20fnMakeTb(50,50,1);%20%20%20%20%20%20fnLocatePic("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>      </div>    </body>  </html>

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

上一篇：兼容FireFox 用javascript寫的一個畫圖函數

下一篇：javascript實現的一個自定義長度的文本自動換行的函數。