web-dev-qa-db-ja.com

不規則な画像サイズのギャラリーのユーザーインターフェースで「スペース」を埋める最良の方法は何ですか？

不規則な画像サイズのギャラリーのユーザーインターフェースで「スペース」を埋める最良の方法は何でしょうか？

条件：

  • 行には最大3つの画像のみを保持できます。
  • 左フロート
  • 画像の合計幅がコンテナの幅を超えると、画像がずれてスペースができます。

Irregular Images with space

例えば：

赤いボックスが気になります（空のスペースです）。

空のスペースで魅力のないインターフェースを作成したくないので、ギャラリーを空のスペースで埋める方法は？

website-designgui-designhtmldesign-processinterface
7
jitendra789

それらをすべて同じ幅で、高さのみが異なるpinterestのように、それらをスタイル設定/タイル化できます。その場合、イメージは元のサイズを保持しませんが、any空白はありません（それがディールブレーカーかどうかはわかりません）。

3
Jeremy A

石積み というjqueryプラグインがあります。

要素を垂直方向に配置し、各要素をグリッド内の次に開いているスポットに配置します。その結果、壁に石工の石を取り付けるのと同じように、さまざまな高さの要素間の垂直方向のギャップが最小限に抑えられます。

同じ作成者が作成した Isotope はさらに優れています。フィルタリングと並べ替えのオプションを使用して、 デモページ を確認してください。

enter image description here

7
Marcos Ciarrocchi

いくつでも行うことができます。私の個人的なお気に入りは、いくつかのルールを壊しますが、起動時に画面の幅を計算し、いくつかの数を使用して、表示できる画像の数を計算します。

if (TotalWidth - imageWidth1 - imageWidth2 - imageWidth3) <= 0  { 3 image center}
elseif (TotalWidth - imageWidth1 - imageWidth2) <=0 { display 2 image center)
 else {display 1 image Center}

注：別の答えには、完全な効果のためのより良い擬似コードがあります。

これにより、現在の設定で写真を投げて、さまざまなデバイスサイズに拡大縮小できます。

あなたができることを除いて..

支配的な色を計算し、それから画像を表示します。

画像にタグを付けると、状況に応じた画像が作成される可能性があります。

すべての画像の色/明るさを合計し、その上に何かを表示します。

コンテンツと色/輝度レベルの上記のルールタグを使用して、画像に関するコメントを表示します。

おそらく、パディングイメージをランダム化して前後に配置します。画像がたくさんあるはずです。そうでなければ、草のコメントの繰り返しノイズのようになります。

また、picasa/Google +のような効果を実行し、最も明るい/最も暗いまたは他の方程式を外して、それを背景として使用することもできます。これにより、空白の領域に関心が与えられ、非常に動的になります。これはおそらく私の最初のお気に入りと組み合わせて使用​​される私の2番目のお気に入りです。また、「最も視覚的に異なる」ものを他のものと結び付けるのにも役立ちます。

4
ransom bot

Marjanは、無関係な画像を追加する代わりに、空のスペースをそのままにしておくことに同意します。もちろん、それらは美学に追加され、目への負担にはなりません（デザインによって異なります）。

画像の右側にある空白スペースを避けたい場合は、コードを変更して、行内の画像の合計幅をギャラリーコンテナーの幅と一致させることができます。
1。 3つの画像が連続する場合は、右側の空きスペースの幅を計算します（（TotalWidth-imageWidth1-imageWidth2-imageWidth3）/）この値を各画像の幅に追加し、高さを比例的にスケーリングします。
2。連続する2つの画像の場合、上記と同じことを行いますが、（（TotalWidth-imageWidth1-imageWidth2）/ 2）を使用してギャップを計算しますこの値を各画像の幅に追加し、高さを比例的にスケーリングします。

右側の空のギャップの幅に特定の許容限界を設定することもできます。幅が許容限界を満たしている場合は、3つの画像すべての幅を減らして同じ行に3番目の画像を表示できます。ギャラリーコンテナの幅と同じです。

より多くのコードとJavaScriptの処理が必要になり、ページの読み込み時間がさらに長くなるため、各画像の下にある空のスペース（存在する場合）をこれ以上いじらないことをお勧めします。コンテナの右側の空のスペースを調整するか、OR同様の方法で両方の画像の下のスペースを調整します。

1
macln

コメントで示唆されているように、目を引く無関係な画像で空白を埋めることはお勧めしません。

画像の順序とサイズで遊ぶことがオプションではない場合、ページの右側に空白を残すことはそれほど大したことではありませんが、少なくとも縦軸の各行の画像を中央揃えにします、空白の分布を改善する。画像と周囲の空白の間のコントラストを減らすために、微妙なテクスチャ背景を見つけることもできます。

1
Darragh