divのグリッドをできるだけ効率的に埋めてください（CPUではなく画面スペース）

Question

私のクライアントの声を表示するページを作っています。いくつかの証言は短く、他のものは長いです。これは、「ブロック状」のようなものを見て...ここではそれが実際にどのように見えるかの写真です：考えた後

（当分のための一時的な繰り返し声を無視してください）

その少し上で、私はすべてが種類のビットより効率的に空きスペースを埋めている場合、それは非常に良く見えることに気づき、これは私が私の画像編集プログラムにアップ調理ものです：

誰かがこのようなことをする方法を知っていますか？私はちょっとぐっとグーグルをしましたが、私はこのようなもののために最良の検索語を決めることはできません...

ありがとう！ここで

EDIT

は、以下の回答の後のように見えることになったものです。みんなありがとう！

Answer 1

masonry jqueryをご覧ください。

Answer 2

あなたはjQueryのを使用することができる場合、私はこのプラグインをチェックアウトしたい：

http://masonry.desandro.com/

Answer 3

はjQuery Masonryプラグインをチェックしてください。

Answer 4

あなたはjQueryで作業を気にしない場合は、jQuery Masonryと呼ばれるプラグインは、このタスクのための完璧です。それを動作させるには少しjQueryを学ばなければならないかもしれませんが、somewhat-extensive tutorialに従うと時間がかかり過ぎるはずはありません。

これを実行する唯一の方法はfloatですが、これはCSSで行うことはできませんが、これらは水平方向にしか動作しません。このプラグインは、あなたがしようとしている、jQuery経由でfloat: topスタイルをエミュレートします。

Answer 5

これはまさにCSS3 multi-column layoutのためのものです。

残念ながら、まだ多くのブラウザでサポートされているわけではありませんので、他のブラウザでは「醜くない」ように賢明な方法を適用する必要があります。たとえば、デフォルトを引き継ぎ、各証言が全幅を占めるようにすることができます。これは読めるほど悪くなく、元のレイアウトよりも確かに優れています。