【jQuery】Pinterest風の異なるサイズの画像を表示する方法(Masonryプラグイン)

pinterest-masonry1

少し前に流行った異なるサイズの画像をPinterestのようなレンガ風に表示されることのできるjQueryプラグインMasonryを紹介します。

Masonryプラグインのよいところは、画面サイズを変更すると、表示されている画像の並びも画面サイズにあわせて自動的に変更してくれるところが個人的には気にいっています。

少し前に流行った表示方法ですが、わたしは今でも気に行っています。
ギャラリーサイトを作る予定のある方には是非ともオススメのプラグインです。

[スポンサーリンク]

このページでやること

Masonryプラグインの使い方を紹介します。
実際に動かすことの出来るサンプル画面も用意しています。

Masonryをダウンロードする

Masonryを取得します。
ダウンロードは本家からどうぞ。
pinterest-masonry3

Masonryを使ったサンプルソース

JavaScript部分のサンプルソースです。

<script>
  $(function(){
    $('#container').masonry({
        itemSelector: '.box', //対象の要素のclassを指定
        columnWidth: 200, //一列の幅サイズを指定
        isResizable: true, //画面サイズ変更時の並び替え
        isAnimated: true, //アニメーション設定
        isFitWidth: true, //親要素の幅サイズを整える
        isRTL: false,     //要素が左右逆にする設定
        gutterWidth: 0,   //要素間の溝の幅
        containerStyle: { position: 'relative' } //親要素にスタイルを追加する
    });
  });
</script>

CSS部分のサンプルソースです。

<style type="text/css">
<!-- 
.centered { margin: 0 auto; }
#container{
    border:1px solid #dadada;
}
.box {
    margin: 5px;
    padding: 5px;
    background: #87CEEB;
    float: left;
    border: medium solid #0065A6;
}
.col2 { width: 160px; height: 200px;}
.col3 { width: 160px; height: 350px;}
.col4 { width: 160px; height: 400px;}
.col5 { width: 160px; height: 500px;}
-->
</style>  

HTML部分のサンプルソースです。

<h1>masonry.jsを使ったPinterest風デザインのサンプル</h1>

<div id="container" class="centered">
  <div class="box col5"></div>
  <div class="box col3"></div>
  <div class="box col2"></div>
  <div class="box col5"></div>
  <div class="box col2"></div>
  <div class="box col5"></div>
  <div class="box col2"></div>
  <div class="box col4"></div>
  <div class="box col2"></div>
  <div class="box col5"></div>
  <div class="box col4"></div>
  <div class="box col3"></div>
  <div class="box col2"></div>
</div>

デモ

実際に動かすことが出来ます

解説

表示する画像の幅が、columnWidth: 200, //一列の幅サイズを指定を超えないように気をつけて下さい。
もし超えてしまうと、表示がおかしくなっていまします。

サンプル画面を表示させたあと、画面サイズを変更してみて下さい。
画像の並びが、自動的に変わります。
変わる際に、アニメーションでにゅっと動くとことが個人的には気にいっています。

さいごに

Pinterest風の画像表示は、まだまだいろいろなサイトでみかけます。
わたしもデジカメで撮りためた写真でいつかギャラリーサイトを作ることができればと思っています。
その時はMasonryプラグインを使っていきたいですね。
それでは!