在应用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>
分享到：
相关推荐
例如，当你在代码中键入`CommMethod.`，Eclipse会自动列出`CommMethod`对象的所有方法供你选择，提高了开发效率。 然而，需要注意的是，这些更改可能不会立即生效。在修改`CommMethod.js`并添加新函数后，可能需要...
总结来说，这个项目利用JavaScript实现了对视频的自动化播放和管理，提供了一种在目录结构中浏览和播放视频的新方式，同时考虑了用户的历史观看体验。对于想要学习如何用JavaScript和Ajax构建自定义视频播放器的...
本项目探讨的是将一个使用JavaScript实现的数独游戏转换为TypeScript的过程，这是一种从弱类型到强类型的语言迁移，旨在提升代码的稳定性和可维护性。 JavaScript是动态类型的脚本语言，而TypeScript是它的超集，...
本篇文章将深入探讨如何使用JavaScript自动添加、删除表格，以及实现窗口居中显示的相关技术。 首先，让我们来理解“JavaScript自动添加表格”。在HTML中，表格由`<table>`元素定义，行(`<tr>`)、列(`<td>`或`<th>`...
4. **JavaScript实现** - 首先，需要获取页面上已加载的图片高度，计算出每一行的高度，将它们存储在一个数组中。 - 然后，监听`window`对象的`scroll`事件，判断用户是否滚动到页面底部。通常，这个判断可以通过...
js导出execl，自动合并单元格，自动增行，增列
通过以上步骤，我们就用JavaScript实现了一个基本的五子棋游戏。这个过程涉及到了HTML布局、CSS样式以及JavaScript的事件监听、DOM操作、数组遍历和游戏逻辑等多个知识点。尽管这只是一个基础实现，但它可以作为...
总之，JavaScript实现瀑布流布局是一项挑战性的任务，但通过理解布局原理和技术，我们可以创建出响应式、适应性强且视觉效果出色的网页。这个压缩包提供了一个很好的学习资源，对于深入理解JavaScript布局技术非常有...
在JavaScript和Vue.js开发中，有时我们需要实现一种功能，即当页面加载或特定事件发生时，使输入框（input）自动获取焦点。这样的需求在创建表单或评论系统时尤其常见，用户可以直接开始输入而无需手动点击输入框。...
这个主题主要围绕一个名为"Suggest"的类进行，该类可能是一个实现自动补全功能的JavaScript库。我们将深入探讨这个库的实现原理，以及如何在实际项目中应用它。 首先，`suggest-0.2.html`可能是这个自动补全功能的...
在实现"Table自动生成列"的过程中，以下是一些关键步骤和技术： 1. 数据源获取：首先，你需要一个数据源，可能是数据库查询结果、XML文件、JSON对象或其他数据结构。这可以使用ADO.NET、Entity Framework或任何其他...
在这个“精选_基于JavaScript实现的数独游戏_源码打包”中，我们将深入探讨如何使用JavaScript这一强大的客户端开发语言来创建一个互动式的数独游戏。 首先，我们需要理解JavaScript的基础语法和DOM操作。...
在以上代码中，我们通过 `mounted` 生命周期钩子初始化 SortableJS，并在拖动结束后调用 `handleColumnDragEnd` 方法更新 `columns` 数据，从而实现表格列的拖动效果。 需要注意的是，实际项目中可能需要考虑更多...
这个压缩包提供了一种纯JavaScript实现的表格自动排序功能，无需依赖任何外部库，如jQuery或AngularJS。下面我们将详细探讨这个解决方案的关键知识点。 首先，我们来看`example.html`，这是示例页面，它包含了一个...
在这个“Finereport数据集参数实现动态列报表模板 + 函数JS代码”的资源包中，我们将深入探讨如何利用FineReport的特性来实现动态列报表，并结合JavaScript（JS）代码来优化这一过程。 首先，动态列报表的核心在于...
启用插件后，在编写JavaScript或TypeScript代码时，当你开始输入`import`或`require`语句时，VSCode会根据项目中的模块和依赖包自动列出可导入的模块和成员。例如，如果你正在导入`lodash`库，你只需键入`import _ ...
JavaScript实现的断字（Hyphenation）算法是网页排版中的一个重要技术，它主要用于提高文本在窄列或小屏幕设备上的可读性。在没有适当的断字时，长单词可能会导致行尾出现尴尬的空白或者使得单词跨越两行，影响整体...
在JavaScript的世界里，实现表格（table）数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中，“原生js table表格自动排序效果”提供了一个无需依赖任何外部库（如jQuery...
用户可以通过手动拖动列边框来改变宽度，或者采用自动调整列宽的机制，让表格更适应屏幕尺寸或数据内容。 最后，**行交换**功能则允许用户交换表格内的行，这对于数据对比或整理非常有用。例如，在一个待办事项列表...