＜li＞をfloatして数個並べて、改行している時にガタガタにならずに、要素の高さを揃える方法（javascript＋css）

ワーードプレスなどで、繰り返しループ処理で、カスタム投稿の記事を一覧で表示させるときに、
サムネイル画像や、タイトルや、文章などを入れたBOXを横並びに3個とか4個とかで配置して、
横幅一杯になったら改行していくようなページを作ったとします。

その場合、
普通にfloatしているだけだと、タイトルなどの文字数の多い少ないによって、書く＜li＞のBOXの高さが長かったり、短くなったりします。

そうすると、
次の行（2段目とか3段目とか）は、他より長くなってしまった、＜li＞の下は、空白になってしまって、
その横から表示されてしまいガタガタしてしまい、レイアウトが崩れてしまいます。

そんな時に、助けてくれるのがこちらのjavascriptです！

$(function () {
    //一行あたりの要素数=列数を変数に格納
    var columns = 4;
    //該当するli要素の数を取得
    var liLen = $('.each_height_adjust').length;
    //行の数を取得
    var lineLen = Math.ceil(liLen / columns);
    //各li要素の高さの配列
    var liHiArr = [];
    //行の高さの配列
    var lineHiArr = [];

    //liの高さを配列に格納後、それが行の中で一番高い値であれば行の高さとして格納していく繰り返し文
    for (i = 0; i <= liLen; i++) {
        liHiArr[i] = $('.each_height_adjust').eq(i).height();
        if (lineHiArr.length <= Math.floor(i / columns) 
            || lineHiArr[Math.floor(i / columns)] < liHiArr[i]) 
        {
            lineHiArr[Math.floor(i / columns)] = liHiArr[i];
        }
    }
    
    //.eachでそれぞれのliの高さを変更
    $('.each_height_adjust').each(function(i){
        $(this).css('height',lineHiArr[Math.floor(i / columns)] + 'px');
    });

↑このjsに、floatHeight.jsなどと名前をつけて、アップロードします。

そしてheaderにfloatHeightjsを読み込んで、
＜li＞のところに、class=”each_height_adjust”を以下のようにつければOKです！！

（例）

<li class="each_height_adjust">中身がはいります。</li>

実際に使用したサイト例はこちら↓
http://ecotake.jp/

参考サイト
http://bunka.hatenablog.com/entry/jquery-li-height-adjust