设计不同类型的标签云
我希望所有标签都具有相同的大小，而不是拥有一堆大小不同的链接。然而，我的目标是最大限度地减少创建云所需的空间量，也就是最大限度地减少所使用的线路数量。
举个例子：
（来源：stevethomas.com.au)
看起来像任何普通的标签云。然而，看看“roughdiamond”标签周围的所有额外空间，这些空间可以由底部附近的“stone”等其他标签填充，这可以有效地从云中消除整个额外的行。
在开始新行之前，我该如何让单词填满上面可能存在的空间？我并不是在谈论重新组织它们以找到所需的绝对最少行数。如果我浏览图像中的列表，“pendant”、“howlite”和“igrice”将转到第 1 行将其填满，“roughdiamond”将转到第 2 行，因为第 1 行已满，“电气石”将转到第 2 行转到第 3 行，因为它无法适合第 1 行或第 2 行，与“emberald”相同，但“pearl”会转到第 2 行，因为它可以适合那里，因为有额外的空间。我认为在 CSS 中可能有某种方法可以做到这一点，这只会导致链接折叠到它可以容纳的任何可填充空间中。
Rather than having a bunch of links that are all different sizes, I want all of my tags to be the same size. However, my goal is to minimize the amount of space required to make the cloud, aka minimizing the number of lines used.
Take this example:
(source: stevethomas.com.au)
Looks like any normal tag cloud. However, look at all that extra space around the 'roughdiamond' tag, which could be filled in by other tags like 'stone' down near the bottom, which could effectively eliminate an entire extra line from the cloud.
How would I go about getting the words to fill in whatever space possible above them before starting a new line? I'm not talking about reorganizing them to find the absolute minimum number of lines required. If I was going through the list in the image, 'pendant', 'howlite', and 'igrice' would go to line 1 filling it up, 'roughdiamond' would go to line 2 because line 1 is full, 'tourmaline' would go to line 3 because it can't fit on lines 1 or 2, same with 'emberald', but 'pearl' would go to line 2 because it can fit there since there is extra space. I figure there would probably be some way of doing this in CSS that would simply cause the links to collapse into any fillable space it can fit in to.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我怀疑这在 CSS 中是否可行，因为这需要特定的计算来最佳地重新排列单词。
您实际上要解决的问题是具有相同大小的箱子的二维 装箱 问题以及可变尺寸的物品。
正如这个答案 对于有关装箱的问题，将物品从最大到最小排序，然后在大物品之间插入较小的单词通常会得到相当好的近似值。您必须尝试使用您将使用的单词类型，以确定这是否适合您（他的方法可能会导致许多小单词聚集在云的底部）。
I doubt this is possible in CSS since this requires specific computations to rearrange the words optimally.
The problem you are actually looking to tackle is the 2 dimensional bin packing problem with bins of equal size and items of variable size.
As mentioned in this answer to a question about bin packing, sorting your items from largest to smallest and then fitting smaller words in between the large ones will usually result in a fairly good approximation. You will have to try it out with the types of words you'll be using to find out whether this will work for you (his approach may result in many small words grouped at the bottom of your cloud).
这不是最佳解决方案，但可能（大多数时候）比随机解决方案更好，并且比最佳解决方案更快：按字符串
长度宽度按降序显示每个标签。这会给你一个最多比最佳解决方案差 14% 的安排。
编辑：如果您按
strlen宽度升序对标签进行排序，也适用。This is not an optimal solution but will probably (most of the time) be way better than a random one and way faster than a optimal one: display each tag by string
lengthwidth in descending order.This will give you a arrangement that will be at max, 14% worse than the optimal solution.
EDIT: Also works if you sort tags by
strlenwidth in ascending order.您可以尝试将它们放在与文本高度完全相同的 div 中，然后将它们浮动到各处？
You could try putting them in a div that is the exact height of the text, then floating them all over the place?