javascript兑现自动换列-JavaSript-爱易网页

javascript兑现自动换列

日期：2014-05-16　浏览次数：20460 次

javascript实现自动换列
在应用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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript兑现自动换列

相关资料更多>

推荐阅读更多>