3

私は画像ギャラリーに取り組んでおり、画像のサムネイルをぎっしり詰め込みたいと思っています。サムネイルは次のとおりです。

  • 異なる縦横比
  • 同じソース解像度 (最長エッジ 256 ピクセル) で利用可能

バランスをとることができる最適な解決策（おそらくヒューリスティックでなければならないでしょう）を考え出したいです：

  • 各サムネイル間のパディング (できれば一定)
  • サムネイル サイズの一貫性 (できればすべて同じサイズ)
  • 表示用にトリミングされる各画像の量 (なしが望ましい)
  • 並べ替え順序と一致する画像の近接性 (並べ替えの隣人はグリッド内で互いに近くにあることが望ましい)

これは、四角形のパッキング問題の変種だと思います。

私はいくつかの良い参考文献を見つけました: Fast Optimizing Rectangle Packing Algorithm for Building CSS Sprites

しかし、専門家に確認して、次のことを知っている人がいるかどうかを確認したかったのです。

4

1 に答える 1

2

私はこのようなものを思いつきました（現在、githubにもコードがあります） https://mendrik.github.io/diorama/

順序はランダムになり、サイズは均一になるように努めますが、私にとっては、サイズを一定に保つよりも、スペース全体を埋めることがより重要でした. ブラウザ ウィンドウのサイズを変更して、その動作を確認できます。

高さが固定されていない場合は、他にもいくつかのオプションがありますが、主にナップザックまたはパーティショニング アルゴリズムです。2D ビン バッキングでは、ギャップが生じたり、常にすべての画像に適合するソリューションが見つからなかったりします。

私のアルゴリズムにはトリミングがほとんどなく、十分な組み合わせがあれば、常にすべての画像が特定のスペースに収まります。画像が少ないほど、明らかにトリミングが多くなります。

于 2014-08-15T10:57:54.177 に答える