php - 石積みのようなピクチャーグリッド

Question

私はこの複合体について考えすぎてきましたが、解決策を見つけるためにアプローチできる簡単な答えまたは別の方法があると確信しています.

私が達成しようとしているのは、画像のランダムなグリッドです。フラッシュグリッドに並べたい画像の配列があります。これが意味することは、グリッドに隙間がないようにしたいということです。画像の例を次に示します。

主な仕様:

• コンテナ/セルは、画像がゆがむことなく収まる比率である必要があります
• グリッドは平らでなければなりません。最後の行を含めて隙間があってはなりません。

私が抱えている問題は、私が達成しようとしているテーブル maxtrix を作成できる式を考え出すことも言葉にすることもできないことです。Masonary は私が探している 99.9% です。ただし、グリッドは画像サイズを考慮せず、フラッシュも終了しません。その1％が、私がそれを使用することを考えていない理由です.

これは数学に関連しているため、特定のJavaScriptを探しているわけではないので、PHPでレイアウトを作成してからJavaScriptの機能を強化する予定です。

ヘルプやポインタをいただければ幸いです。

Answer 1

サンプル画像は行に並んでいます。さらに、全体の固定サイズについては何も書かれていないので、レイアウト全体の縦横比は自由に選択できると思います。その場合、次の行に沿って何かを試すことができます。

1. 高さを固定し、縦横比を維持できるように幅を選択して、すべての画像を一列に並べます。
2. その単一の行を複数の行に分割します。ここで、いくつかのヒューリスティックを使用して、最終結果を好みに合わせて調整できます。しかし、どのソリューションも、あなたが述べた要件を満たすでしょう。
3. すべての行が同じ幅になるように各行を拡大縮小してから、それらを積み重ねます。

明らかに、これは大まかな概要にすぎません。非常に難しい部分は、画像を異なる行に分散する方法です。1 つの目標は、最終的な画像が同様のサイズになるように、同様のアスペクト比の画像を結合することです。各比率について、目的の画像領域につながる好ましい画像の高さを計算し、共通の高さにスケーリングした結果の幅が最終的な行に必要な幅と一致するまで、同様の高さの要件を持つ画像を組み合わせることができます。しかし、同様の幅の行を作成するなど、他の側面も同様に役割を果たします。

他の回答やコメントで目的の提案を見つけて、気に入ったものが見つかるまでそれらを試してみてください。

Answer 2

Justified-Galleryはそのためのソリューションのように見えます。ここに例のあるサイトがあります。