高さが異なるli(div)を敷き詰める

サイトを作っていて、2カラムの高さがそれぞれ異なるliやdivタグを奇麗に並べたくなった。
普通にそのようなliを回り込みを使って、並べるとliタグが高さで同期を取ろう(?)としているような振る舞いをして、不自然な余白ができる。

ぐぐってもCSSでの解決策がヒットしなかったので、jsで余白を消すことにした。
今回使ったのは、敷き詰める系jQueryプラグインのManosy。
wookmarkとか他にも、要素を敷き詰める系はあるっぽい。
以下を実行すれば、余白がなくなった。

$(function(){
  $('#main').masonry({  //ここには敷き詰めたい要素を囲うidなど指定します。
    itemSelector : 'li.content' //ここに敷き詰めたい要素のclassを指定します。
  }); 
});

簡単にできました。感謝。