「Masonry」とはJavaScriptグリッドレイアウトライブラリです。
高さの違う要素を、パネルを敷き詰めるようにレイアウトしてくれるというものです。

ウィンドウのサイズが変われば、アニメーションしながら並び替えという動作も行ってくるので、
レスポンシブWEBデザインとしても利用できます。

JavaScriptライブラリをダウンロード
jQuery
jQuery masonry

headタグ内でダウンロードしたライブラリを読み込みます。

<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./masonry.pkgd.min.js"></script>

HTMLを用意します。

<div id="boxWrapper">

    <div class="box">
        sample1<br>
        sample1
    </div>

    <div class="box">
        sample2<br>
        sample2<br>
        sample2
    </div>

    <div class="box">
        sample3
    </div>

    <div class="box">
        sample4<br>
        sample4<br>
        sample4<br>
        sample4
    </div>

</div>

ボックスのデザインを設定します。

div#boxWrapper
{
    width: 520px;
}
div.box
{
    width: 220px;
    background: #f5f5f5;
    margin: 5px;
    padding: 10px;
    box-shadow: 0 2px 2px #ccc;
}

最後に、以下のスクリプトをページのどこかに記述します。

<script type="text/javascript">
    $(function(){
        $('#boxWrapper').masonry({ // 親要素のidを指定
            itemSelector: '.box',  // 整理される要素のclassを指定
            isAnimated: false      // スムースアニメーション設定
        });
    });
</script>

サンプルは以下のようになります。