ブロック要素の高さを揃える

サンプル

$ (function () {
    for (var i = 1; $ (".equal-bottom-" + i).length; i++) {
        var block = $ (".equal-bottom-" + i);
        var height = 0;
        block.each (function () {
            height = Math.max ($ (this).offset ().top + $ (this).height (), height);
        });
        block.each (function () {
            $ (this).height (height - $ (this).offset ().top);
        });
    }
});

div.box {
    border: 1px solid #000;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 10px;
}
div.grid {
    _height: 1%;
    *zoom: 1;
}
div.grid:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
div.grid div.column {
    float: left;
}
p {
    margin-bottom: 0;
    margin-top: 0;
}

<div class="grid">
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box equal-bottom-1"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box equal-bottom-1"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="width: 200px;">
        <div class="box equal-bottom-1"><p>ほげほげほげほげほげ...</p></div>
    </div>
</div>
<hr />
<div class="grid">
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-2"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box equal-bottom-2"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="width: 200px;">
        <div class="box"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-2"><p>ほげほげほげほげほげ...</p></div>
    </div>
</div>
<hr />
<div class="grid">
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box"><p>ほげほげほげほげほげ...</p></div>
        <div class="box"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-3"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-4"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="margin-right: 20px; width: 200px;">
        <div class="box equal-bottom-3"><p>ほげほげほげほげほげ...</p></div>
        <div class="box equal-bottom-4"><p>ほげほげほげほげほげ...</p></div>
    </div>
    <div class="column" style="width: 200px;">
        <div class="box equal-bottom-4"><p>ほげほげほげほげほげ...</p></div>
    </div>
</div>