php - ギャラリーの列に画像を均等に分配する

Question

簡単な説明

現在、3 つの列を持つギャラリーを作成しています。各列には、幅が同じで高さが異なる画像が含まれています。

列の画像はディレクトリから収集され、PHPglob()関数を使用して配列に配置されます。これは簡単な部分です...

ギャラリーの例:

問題

これらの画像は列に動的に読み込まれて配置されるため、列の高さが大きく異なる可能性があります。

たとえば、2 つの縦向きの写真が列 1 に配置され、2 つの横向きの写真が列 2 に配置されている場合、列は次のように非常に不均一になります。

列の高さが一致する可能性は非常に低いですが、与えられた画像にできるだけ近づけたいので、取得した画像を見て列に配置するアルゴリズムを形成したいと考えています。高さができるだけ近い 3 つの列を返します。

したがって、たとえば、スクリプトは画像を再ソートして次のように配置することで、上記の問題を修正します。

正しいアルゴリズムがあれば、これを書くことができますが、これを行うための最良の手順が思い浮かびません。誰でも手順を提案できますか?

考えられる解決策

私が考えた方法の1つ（これには欠陥があると思うので、より良い方法があると思います）：

1. 結合されたすべての画像の高さを合計し、列の数 (3) で割ります。これにより、目指す高さが得られます
2. 画像を列配列に分散し、列の高さを超えると、次の列にオーバーフローします。
3. 残った画像を最初の列に配置し、次に 2 番目の列などに配置します...

前もって感謝します

Answer 1

以下に沿って何かを提案します：

1. 画像を最も高いものから最も短いものの配列に並べます (幅が一定であると仮定します)
2. 最初の列配列に画像を追加
3. 合計の高さが前の列配列と同じかそれ以上になるまで、次の列配列に画像を追加します
4. すべての画像が使用されるまで、手順 2 と 3 を繰り返します (列を昇順と降順で交互に入力して、物事を均等にすることもできます)。
5. 列に画像を追加する前に、画像配列をシャッフルしてグリッド線をランダムに表示します
6. 短い列の画像の垂直余白を調整して、最も高い列の合計の高さに一致させます (一種の垂直方向の位置合わせ)。

お役に立てれば！

Answer 2

このようなものを試すことができます。配列を作成:

$totalHeight = array(
 1 => 0, //Column 1
 2 => 0, //Column 2
 3 => 0 //Column 3
);

$totalHeigthが最小の列に画像を追加し、画像の高さを追加してその列の高さを増やします。

したがって、ループ内に次のような配列がある場合:

$totalHeight = array(
 1 => 2500, //Column 1
 2 => 1950, //Column 2
 3 => 2450 //Column 3
);

列 2 に画像を追加する必要があることがわかります。