javascript实现自动换列

最新推荐文章于 2022-03-21 14:07:12 发布

beyond1993

最新推荐文章于 2022-03-21 14:07:12 发布

阅读量759

点赞数

分类专栏： Javascript 文章标签：自动换列 css javascript desktop extjs ViewUI

本文链接：https://blog.csdn.net/beyond1993/article/details/84058858

版权

Javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在应用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>

beyond1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现自动换列

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

扫一扫