欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

javascript实现自动换列

程序员文章站 2024-01-17 14:48:34
...
在应用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 onload="viewList()" 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>
相关标签： 自动换列 css javascript desktop extjs

上一篇： 找出具有n个元素的集合中最大的两个元素，要求比较次数尽可能少（三种算法的思考）

下一篇： win8 安装 Windowswin8安装 

推荐阅读