10

すべて異なるサイズのリンクをたくさん持つのではなく、すべてのタグを同じサイズにしたいと考えています。ただし、私の目標は、クラウドを作成するために必要なスペースの量を最小限に抑えることです。つまり、使用する行数を最小限に抑えることです。

次の例を見てください。

例
(出典: stevethomas.com.au )

通常のタグ クラウドのように見えます。ただし、「roughdiamond」タグの周りの余分なスペースをすべて見てください。これは、下部近くの「石」などの他のタグで埋められる可能性があり、雲から余分な線全体を効果的に排除できます.

新しい行を開始する前に、単語の上に可能なスペースを埋めるにはどうすればよいですか? 必要な絶対最小行数を見つけるためにそれらを再編成することについて話しているのではありません。画像のリストを調べていた場合、「ペンダント」、「ハウライト」、「イグリス」は 1 行目に移動し、1 行目がいっぱいなので「ラフダイヤモンド」は 2 行目に移動し、「トルマリン」は 2 行目に移動します。 'emberald' と同じように、1 行目または 2 行目に収まらないため 3 行目に移動しますが、'pearl' は余分なスペースがあるため、2 行目に収まるため、2 行目に移動します。おそらく、CSS でこれを行う何らかの方法があり、リンクが収まる入力可能なスペースにリンクを単純に折りたたむ方法があると思います。

4

3 に答える 3

6

単語を最適に再配置するには特定の計算が必要になるため、これが CSS で可能であるとは思えません。

実際に取り組んでいる問題は、同じサイズのビンと可変サイズのアイテムを使用した 2 次元のビン パッキング問題です。

ビンのパッキングに関する質問に対するこの回答で述べたように、アイテムを最大のものから最小のものに並べ替えてから、大きなものの間に小さな単語をはめ込むと、通常、かなり適切な近似値が得られます。使用する単語の種類を試して、これがうまくいくかどうかを確認する必要があります (彼のアプローチでは、雲の底に多くの小さな単語がグループ化される可能性があります)。

于 2010-05-03T23:25:12.230 に答える
2

これは最適な解決策ではありませんが、おそらく (ほとんどの場合) ランダムな解決策よりもはるかに優れており、最適な解決策よりもはるかに高速です:各タグを文字列の長さ幅ごとに降順で表示します。

これにより、最適なソリューションよりも最大で 14% 悪い配置が得られます。

編集:タグをstrlen幅で昇順で並べ替えた場合にも機能します。

于 2010-05-03T23:45:10.333 に答える
0

テキストの正確な高さである div にそれらを配置してから、それらをあちこちに浮かせてみてはいかがでしょうか?

于 2010-05-03T23:22:14.420 に答える