javascript实现自动换列

y1d2y3xyz · 发表于 2013-2-7 23:47:43

在应用Extjs的桌面应用desktop中遇到这个问题，图标需要根据页面的高度来自动换列，效果和http://web.qq.com/?ADTAG=DESKTOP效果一样，开始到网上找用CSS实现的方式，找了一堆没一个是我想要的，我想连QQ都没能用样式直接实现，所以不折腾了，直接用JS实现，逻辑很简单，先获得你页面高度，再获取你所有图标个数，每个图标的高度宽度你是知道的，这样你就可以通过计算获得每个每列显示的图标个数，进而获得每个图标的X,Y坐标位置，把每个图标的对象设为绝对定位，看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自动换列</title><style type="text/css">body{padding:0px; margin:0px;}</style><script type="text/javascript">function viewList(){ //这个你根据需要自己获取节点的数组var arr = document.getElementsByTagName('div');//获取所有要显示的图标var iconNum = arr.length;//获取多少个显示的图标var screen_h = document.documentElement.clientHeight;//页面的高度var colNum = Math.floor(screen_h/50);//每列显示多少个var col = Math.ceil((iconNum*50)/screen_h);//总共能显示多少列document.title = "个数:"+iconNum+",高度："+screen_h+",列数："+col;for(var i=0;i<iconNum;i++){var x = (Math.floor(i/colNum))*50;var y = (i%colNum)*50;arr[i].style.top = y+"px";arr[i].style.left = x+"px";}}</script></head><body onresize="viewList()"><div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">1</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">2</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">3</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">4</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">5</div><div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">6</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">7</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">8</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">9</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">10</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">11</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">12</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">13</div> <div style="height:48px;width:48px;border:1px #0F6 solid;position:absolute;">14</div></body></html>

		自动登录	找回密码
密码			立即注册