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

时间:2020-05-12 人气:0

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

<!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><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="+url+" /></div>");  
    
     }  
    </script>  
  </head>  
  <body>  
    <div>  
    <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/bluehttps://img.qb5200.com/download-x/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.comhttps://img.qb5200.com/download-x/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需刷新才能执行]

加载全部内容