设计一种不同类型的标签云

Question

我希望所有标签的大小都相同，而不是拥有一堆不同大小的链接。但是，我的目标是最大限度地减少制作云所需的空间，同时最大限度地减少使用的线路数量。

举个例子：

看起来像任何普通的标签云。然而，看看'roughdiamond'标签周围的所有额外空间，可以通过其他标签填充，例如靠近底部的“石头”，这可以有效地从云中消除一条额外的线。

在开始换行之前，我该怎么做才能填写上面可能的空格？我不是在谈论重新组织它们以找到所需的绝对最小行数。如果我正在浏览图片中的列表，'pendant'，'howlite'和'igrice'会在第1行填充它，'roughdiamond'会转到第2行，因为第1行已满，'碧玺'会转到第3行，因为它不能适合第1或第2行，与“emberald”相同，但是'pearl'会进入第2行，因为它有适合那里的空间。我认为在CSS中可能会有一些方法可以简单地使链接折叠到它可以容纳的任何可填充空间中。

Answer 1

我怀疑这在CSS中是可行的，因为这需要特定的计算来最佳地重新排列单词。

您实际需要解决的问题是二维bin packing问题，其大小相同的容器和可变大小的项目。

如this answer中提到的关于装箱的问题，将物品从大到小排序，然后在较大的装置之间装入较小的单词通常会产生相当好的近似值。您将不得不尝试使用您将使用的单词类型来确定这是否适合您（他的方法可能会导致在云的底部分组许多小词）。

Answer 2

这不是最佳解决方案，但可能（大多数情况下）比随机方式更好，速度比最佳方式快：按字符串长度宽度显示每个标记按降序排列。

这将使您的安排最多比最佳解决方案差14％。

编辑：如果您按 strlen 宽度按升序对标签进行排序，也可以使用。

Answer 3

您可以尝试将它们放在文本的确切高度的div中，然后将它们浮动到整个地方吗？