半随机定位 Div，没有重叠

Question

我有一个页面，其中包含 DIV，其中包含不同字体大小的短语（一两个词），需要根据数字参数从左到右放置，并且垂直放置，以免重叠。

它就像一个标签云，但也包含在 y 轴中的信息（在本例中为“coolness” - http://cool-wall.appspot.com）

我应该如何布置这些？我目前正在使用一系列非常混乱的 DIV，如下所示：

<div style="position:absolute; top:150px;left:10px;right:10px;bottom:10px"> 

<!-- then, repeated, with different top, left and font-size values -->

  <div style="align:center; margin:0; border:none; padding:0; float:left; visibility:visible; position:absolute; top:21%; left:56%; font-size:11px"> 
    <div style="margin-top:0%; margin-right:50%; margin-bottom:0%; margin-left:-50%;"> 
      <a href="foo"><span style="display:inline"> &larr; </span></a> 
      <a href="bar"><span style="display:inline"> Buzz </span></a> 
      <span style="display:inline"> &rarr; </span> 
    </div> 
  </div>

  <!-- of course, followed by a close div -->

</div>

我使用样式表来提取其中一些样式，并且我意识到它的 CSS（和 HTML）非常糟糕……但这就是我可以一起做的（几乎）我想做的事情。上面的主要问题（除了令人困惑之外）是我无法设置定位，因此它不会重叠，因为我不知道字体的大小，也不知道它在屏幕上的显示方式。

乐于使用 JavaScript 来做正确的事。但我不知道从哪里开始。有什么建议吗？

Answer 1

如果您设置了宽度，则 dom 对象上有一个 javascript 属性会告诉您标签的高度。我相信它叫做clientHeight

alert(document.getElementById('myElement').offsetHeight);

试试看（另见http://www.webdeveloper.com/forum/archive/index.php/t-121578.html）

或

试试这个

<span style="margin-top:${randomNumber}px;margin-bottom:${randomNumber}">randomtext</span>
<span style="margin-top:${randomNumber}px;margin-bottom:${randomNumber}">randomtext</span>
..
<span style="margin-top:${randomNumber}px;margin-bottom:${randomNumber}">randomtext</span>

让你的所有元素只显示内联，以随机顺序输出它们，然后在它们上设置随机边距。这一切都可以通过服务器端代码（如果您需要客户端代码，也可以使用 javascript）来完成。

Answer 2

x 值设置在每一个上，您希望在页面上尽可能高（最低 y），因为它可以不重叠。还不错：

1) 渲染容器 - position:relative;使用“position:absolute; top:0; left:-1000;”渲染容器内的每个项目 - 将它们全部绘制到屏幕外。

2) 一个一个地移动元素到它需要的x坐标和y=0；检查它与所有之前的渲染项是否发生冲突，如果发生冲突，将其向下移动一个像素，直到它不发生冲突：

var regions = [];
for(var i = 0; i < items.length; i++){
  var item = items[i];

  item.style.x = getX(item); // however you get this...
  var region = YAHOO.util.Dom.getRegion(item);
  var startingTop = region.top;
  for(var iReg = 0; iReg < regions.length; iReg++){
    var existingRegion = regions[iRegion];
    while(region.intersect(existingRegion)){
      region.top++;
      region.bottom++;
    }
    item.style.y = (region.top - startingTop) + 'px';
  }
}

出于性能原因，重要的是只更新区域而不是实际将 dom 节点一次移动 1px。

将最重要的项目放在首位，它们的优先级将高于其下方的项目。

Answer 3

不要绝对定位你的元素。这就是它们相互重叠的原因......