Javascript 半随机定位div，无重叠

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

它就像一个标签云，但y轴中也包含信息（在本例中为“酷”）

我应该如何布置这些？我目前正在使用一系列非常混乱的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>

&rarr；

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

---

很高兴使用JavaScript来实现它。但我不知道从哪里开始。有什么提示吗？

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

警报（document.getElementById（'myElement'）.offsetHeight）

试试看（另请参见）

或

试试这个

<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）完成。

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

在每一个上都设置了x值，您希望页面上的x值尽可能高（最低y值），而不会重叠。还不错：

1） 渲染容器-位置：相对；使用“位置：绝对；顶部：0；左侧：-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';
  }
}

var区域=[]；
对于（变量i=0；i

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

---

将最重要的项目放在第一位，它们将以比下面的项目更高的优先级进行渲染。

是否可以自动执行此操作，而不必使用JavaScript进行大量计算？据我所知，有了这个属性，我需要有一个函数来计算屏幕上被div占据的部分，要么跟踪这个，要么每次都重新计算。。。对吧？不是绝对位置。我能看到做你想做的事情的唯一方法是使用Javascript。浮动元素将使它们浮动到屏幕的左侧（或右侧），并占据尽可能多的水平空间。但是，这不适用于垂直空间。javascript做这样的事情不会太难。你只需要在参与其中的元素上循环，使用宽度和高度，计算出放置它们的最佳位置。好的，很有趣。此外，您还提到，如果“设置了宽度”，则此操作有效。在渲染之前，我不知道它会有多大，因为它取决于字体渲染和字体大小。我想我还需要一个类似的函数来获得宽度，这样我就可以计算屏幕使用率。我想我可以用同样的方式使用offsetWidth？是的，offset width也可以。我发布的链接显示此人也在使用scrollHeight和scrollWidth（他获得scrollHeight和offsetHeight之间的最大值）。那应该对你有用。当我开发一个需要动态更改css的创作工具时，它对我很有用。css可以改变所有拖放元素的大小，因此需要重新定位一些东西。谢谢-这是一个非常好的答案。我仍然希望有人知道一种方法，让浏览器的布局引擎自动完成这项工作。：-）好的，但是我应该如何定位它们呢？我想要一个绝对的X值，和任何不会造成重叠的Y值。这看起来非常好。但是我认为上面的代码中有一些bug：“…regions[iRegion]；”应该是“regions[iReg]”；您需要将区域添加到最外层for循环底部的数组中：regions.push（region）。。。此外，它还需要雅虎的YUI代码，我认为最好的实例是：