A JavaScript Fancier

伟大的javascript技术研究中...

:: 管理 ::

304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks

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

<!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\">&nbsp;</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+" /></div>");
 
   }
  </script>
 </head>
 <body>
  <div id="aa">
  <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/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>

posted on 2007-01-03 00:41 Yemoo'S JS Blog 阅读(1278) 评论(2) 编辑收藏引用所属分类: javascript个人作品

# re: 模仿百万格子小的一小段代码 2007-01-04 22:07 可行性报告

真得太难，太难了..... 回复更多评论

# re: 模仿百万格子小的一小段代码 2007-01-05 23:01 Yemoo'S JS Blog

晕，什么太难？回复更多评论

刷新评论列表

只有注册用户登录后才能发表评论。

A JavaScript Fancier

公告

常用链接

留言簿(26)

随笔分类

随笔档案

Ajax技术站点

javascript学习站点

JS高人Blog

Ruby&&Ajax框架

Web技术站点

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

评论