フロートボックスを自動的に並べ替えてくれるJavascriptプラグイン「Masonry」

Masonry
http://masonry.desandro.com/

jQueryではないんだけど、ふた昔前に流行ったやつ。ブラウザの横幅に合わせてボックスがグリグリと動くあれ。
仕事で使ってみたけど、思いのほか使い勝手が良かったので記事にすることにした。
せっかくなのでこのブログのトップページでも対応させてみた。ブラウザの横幅1000px以上で記事の一覧がフロートするように設定。

＜使い方＞

Masonry（上記サイト）からjavascriptのソースをダウンロードする。
1.でダウンロードしてきたソースコードを、サイトに貼り付ける。
<script src="/path/to/masonry.pkgd.min.js"></script>
/path/to/masonry.pkgd.min.js　の部分はそれぞれのサイトに合わせて修正

ブラウザの幅に合わせて並べ替えさせたいボックスのクラスをcls_child、cls_childの上位クラスをcls_parentとした場合
【CSS】

.cls_child {width:370px; padding:10px; margin-right:10px; margin-bottom:10px;}

1	.cls_child {width:370px; padding:10px; margin-right:10px; margin-bottom:10px;}

【HTMLタグ】

&lt;div class="cls_parent"&gt;
&lt;div class="cls_child"&gt;内容&lt;/div&gt;
&lt;div class="cls_child"&gt;内容&lt;/div&gt;
&lt;div class="cls_child"&gt;内容&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
var container = document.querySelector('.cls_parent');
var msnry = new Masonry( container, {
  // options
  columnWidth: 400,
  itemSelector: '.cls_parent .cls_child',
  isAnimated: true
});
&lt;/script&gt;

</div>

var container = document.querySelector('.cls_parent');

var msnry = new Masonry( container, {

// options

columnWidth: 400,

itemSelector: '.cls_parent .cls_child',

isAnimated: true

});

</script>

＜注意事項＞

jQueryは不要。jQuery風に記述したい場合は本家サイトを参考に修正のこと。
columnWidth の値は、フロートさせたいボックス（上記の例だと.cls_childクラスの要素）の大きさ（width + padding-left + padding-right + margin-left + margin-right）と同じにする。
querySelector の引数と、itemSelectorの値は、実際のHTMLコードに合わせて変更のこと。