サムネイルのページを表示したい。サムネイルは、ユーザーがアップロードしたアートワークイメージです。各画像には拘束された幅がありますが、拘束された高さではありません。これは切り抜かずに完全な画像を表示するためです。イメージの高さが異なるイメージのコラージュ（ギャップのないグリッド）を動的に作成するにはどうすればよいですか？
隙間なく画像をお互いに突き合わせたいと思っています。列の数は固定されていません。ページを展開またはサイズ変更すると、イメージは正しい数の列に流れます。
float:left
は、私が欲しいものです。背の高い画像がページ内にある場合を除きとき、私は、このギャップを見てもらう：
は、どのように私はギャップを解消するのですか？
これをCSSで行う場合は、すべての列に対してdivを作成し、それらの列を浮動させる必要があります（ただし、画像の順序は崩れます）。
また、this oneのようなjqueryプラグインを使用することもできます。
石積みのプラグインは私が望むことをします。それ以外は、元の順序を各行の左から右に向けることを好みました。 Masonryは最初の行でこれを行いますが、2行目では次の画像を任意の順序で最大の隙間に収まるように見えます。一般的には、最初に "上部"の近くにあるが、必ずしも左から右に向かうように命令することはありません。 – Homan
画像を乱さないようにするには、カウンタを用意しておきます。だから、このカウンタとwhile文は1,2,3,4になります。数字が1になるとdiv 1に追加され、それに4をヒットすると、その数値が0 :)問題は解決しました！ –
あなたのCSSがどれくらい優雅であるか分かりませんが、良い選択肢はありません。 masonry.jsを使ってそれを手助けすることができます。
あなたが望む外観を得るために行の4つの異なるテーブル（1列と各:)） –
を定義することができ、あなたは絶対位置を使用する必要があるとしています。独自のスクリプトを書くか、提案されたようなプラグインを使うことができます。ありがとうございます。 – jchavannes