私は、次のemmulateしようとしているイメージギャラリー

Question

Google+のスタイル：

任意のアイデアどのように？基本的にすべての写真は同じ高さを持ち、写真は行に完全に収まるように動的に整列/トリミング/リサイズされるので、左右のギザギザの部分はありません。ブラウザウィンドウのサイズを変更すると、写真のサイズもサイズに合わせて調整されます。私はアイソトープとjqueryの石積みを試して、どちらも私にこの効果を与えません。

Answer 1

私はこの非常に事を実施しました。ここで私はそれをやった方法は次のとおりです。

1. 、私はターゲットコンテナ（私のイメージが住むことになるコンテナ）の利用可能幅を測定し、
2. これのmaxWidthを呼び出すとページが読み込ま私は渡して、AJAX呼び出しを作りますサーバまでのmaxWidth
3. 私は自分のリストをサーバ上に表示するように決めて、それぞれを1つずつ処理します。
4. 私のリストを繰り返している間、画像を行に追加し続けます。利用可能なmaxWidth（私はこれを渡しました）。画像がmaxWidthをオーバーフローすると、オーバーフロー量を計算します。
5. オーバーフロー量を私の行の画像数で割って、その値を行の各画像から減算します（したがって、私はに取らなければならなかった
   1. ：トン、その幅があまり低下します）
   2. 私は、各行が正確maxWidthに

   に私が検討していたいくつかのものを追加し、行ごとにこれを繰り返します各画像の間に必要とするマージンの幅を考慮して、それをmaxWidth各行を処理するときの累積値。

6. 私たちはコーナースタンプイメージ（より大きく、左上隅に固定されたイメージです。このイメージは2行を含み、他のサムネイルよりも広いです。
7. ブラウザのサイズ変更時に寸法を再計算する必要がありました。ウィンドウのresizeイベントにバインドすると、ドラッグ中に複数のAJAX呼び出しが発生しました。完了時にのみサイズ変更イベントを修正する必要がありました。

全体として、画像ギャラリーが非常によくなった。彼はスクリーンショットです。

Answer 2

流体グリッドシステムは、このような場合に役立ちます： http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem