Masonryプラグイン

Masonaryを使えばタイル状レイアウトが簡単に作れます。画面幅に合わせて列数を自動で調節、なんてこともできちゃいます。デモを作成したのでよろしければ。

Masonryの導入方法

上記リンク先にアクセスし、Download masonry.pkgd.min.jsボタン上で右クリック→リンク先を保存などで、ファイル本体をローカル環境へ保存します。
1408031947

ダウンロードしたファイルをサーバーへアップし、HTMLに読み込ませます(jQuery本プラグインなので、jQuery本体のファイルも一緒に)。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/path/to/masonry.pkgd.min.js"></script>

タイル状にしたいボックスの記述例。

HTML記述例

<div id="gallery">
<ul>
  <li class="box">画像1</li>
  <li class="box">画像2</li>
  <li class="box">画像3</li>
 </ul>
</div>

CSS記述例

.box {
 float: left;
 width: 200px;
}

js記述例

<script type="text/javascript">
$(function(){
 $('#gallery').masonry({
  itemSelector : '.box'
  });
});
</script>

masonryには、itemSelector以外にもたくさんのオプションが用意されています。

デモページの解説

デモページでは、幅可変のボックスの中にmasonryのボックスたちがいるので、画面幅を変えるとそれに合わせてmasonryのボックスたちは並び方を変えます。

この並び方を変える際にデモページのようなアニメーションを入れたい場合は、isAnimated: trueにしてanimationOptionsdurationの値を決めてあげましょう。

<script type="text/javascript">
$(function(){
 $('#gallery').masonry({
  itemSelector : '.box',
  isAnimated: true,
  animationOptions: {
   duration: 400
  }
  });
});
</script>

いやいや、アニメーションとか要らないし幅も固定でいいって場合には、

#gallery {
 width: 650px;
}

のように、外枠のボックス幅を決めてしまえばOKです。