Masonry
http://masonry.desandro.com/

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

<使い方>

  1. Masonry(上記サイト)からjavascriptのソースをダウンロードする。
  2. 1.でダウンロードしてきたソースコードを、サイトに貼り付ける。
    <script src="/path/to/masonry.pkgd.min.js"></script>
    /path/to/masonry.pkgd.min.js の部分はそれぞれのサイトに合わせて修正
  3. ブラウザの幅に合わせて並べ替えさせたいボックスのクラスをcls_child、cls_childの上位クラスをcls_parentとした場合
    【CSS】

    【HTMLタグ】

<注意事項>

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