”シンプル”なデザインを、”フツー”のWEBサイトを

先日、似たようなスクリプトでGrid-A-Liciousを紹介しましたが、今回はコレ系のスクリプトでは超有名なMasonry.jsについて。

なお、Grid-A-Liciousに関する記事はこちらからどうぞ。

最初にこういった動きをするスクリプトを探すとき、どうやって探したら良いのか全くわかりませんでした。Googleには「ウィンドウ幅 ブロック 動く」なんて打ち込んで検索していました・・・ヒントすら出てこなかったですが。

結局全く別の件で違うスクリプトを探していたときに、たまたまそのサイトで触れられていたのがきっかけでようやくそのスクリプト名を知ることになりました。ちなみに読み方は「メーソンリー」だそうです。

以下が公式サイトになっており、デモにもなっているので一度見てみてください。見つけたときは「おぉ~、コレコレ」となりました。

Masonry.jsを使うための準備

jQuery本体とMasonry.jsを読み込む

公式サイトからMasonry.jsのプラグインをダウンロードし、jQuery本体と一緒に読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>

基本の使い方

HTMLの記述例

例として、[id=”grid”]という親divの中にある、[class=”item”]という要素を整列させます。

<div id="grid">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

以下の例では、[id=”grid”]というdivをさらに[id=”wrapper”]というdivで囲み、[class=”item”]の中に画像とテキストを配置します。

<div id="wrapper">
    <div id="grid">
        <div class="item">
            <p><img src="画像のパス"></p>
            <p>ダミーテキスト</p>
        </div>
        <div class="item">
            <p><img src="画像のパス"></p>
            <p>ダミーテキスト</p>
        </div>
        <div class="item">
            <p><img src="画像のパス"></p>
            <p>ダミーテキスト</p>
        </div>
    </div>
</div>

CSSの記述例

適当にCSSで見た目を整えます。

#wrapper { 
  position: relative; 
  max-width: 100%; 
  margin: 0 auto; 
} 
#grid { 
  width: 100%; 
  margin: 0 auto; 
  position: relative; 
} 
.item { 
  margin: 10px; 
  width: 200px; 
  padding: 10px; 
  background: #ddd; 
} 
.item img { 
  width: 100%; 
}

[class=”item”]の全体幅は要素自体の幅とmargin、paddingを足した大きさになるので、200px+10px×2+10px×2で240pxになります。

Masonryの設定

上記で指定した[class=”item”]の全体幅が240pxとなることを踏まえて、Masonryの設定を行います。

<script> 
jQuery(function($){   
	$('#grid').masonry({ 
		itemSelector: '.item', 
		columnWidth: 240,  //class="item"の全体幅
		isFitWidth: true  //親要素の幅に合わせてカラム数を自動調整 
});   
}); 
</script>

以下がデモページになります。デモページでは[class=”item”]を5つ並べています。

Masonry.jsのデモページ

グリッドの幅を変えてみる

上の例では全てのグリッドが同じ幅ですが、幅の大きさを変えてみてもイイ感じになります。というか、こちらの方が「それっぽい」感じになるかと。

例として、基準になる[class=”item”]というグリッドの2倍と3倍の大きさのグリッドを混ぜてみます。

HTMLの記述例

<div id="wrapper"> 
  <div id="grid"> 
    <div class="item"> 
      <p><img src="assets/images/masonry_sample.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item"> 
      <p><img src="assets/images/masonry_sample.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item"> 
      <p><img src="assets/images/masonry_sample.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item"> 
      <p><img src="assets/images/masonry_sample.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item"> 
      <p><img src="assets/images/masonry_sample.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item x2"> 
      <p><img src="assets/images/masonry_sample02.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item x3"> 
      <p><img src="assets/images/masonry_sample03.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
  </div> 
</div>

CSSの記述例

先ほどの基本になるCSSに下記を追記します。

.item.x2 {
  width: 440px;
}
.item.x3 {
  width: 680px;
}

[class=”item”]という要素の幅が200pxで、marginとpaddingを合わせた全体の幅が240px(200px+10px×2+10px×2=240px)でした。

ここでは[class=”x2″]、[class=”x3″]として、[class=”item”]という200px幅の2倍、3倍の要素を作るので、それぞれの要素の幅は

【2倍の場合】
200px×2([class=”item”]の2倍)+10px×2(margin)+10px×2(padding)=440px

【3倍の場合】
440px([class=”x2″]の要素の幅)+200px(3倍にするため3つ目の[class=”item”]を足す)10px×2(margin)+10px×2(padding)=680px

となります。

以下がデモページになります。デモページでは[class=”item”]を5つ並べたその下に2倍のグリッドと3倍のグリッドを並べています。

Masonry.jsのデモページ その2

大きさの異なる画像でもきれいに配置する

ここまでの例は、画像自体のサイズをそれぞれのグリッドの大きさに合わせることが出来る場合です。

次の例では、サイズの異なる画像をつかってキレイに配置してみます。
200×300、440×300、680×300、200×500、400×500の画像を用意してみました。

HTMLの記述例

<div id="wrapper"> 
  <div id="grid"> 
    <div class="item"> 
      <p class="thumb"><img src="assets/images/masonry_sample.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item"> 
      <p class="thumb"><img src="assets/images/masonry_sample.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item"> 
      <p class="thumb"><img src="assets/images/masonry_sample.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item"> 
      <p class="thumb"><img src="assets/images/masonry_sample02.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item"> 
      <p class="thumb"><img src="assets/images/masonry_sample02.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item x2"> 
      <p class="thumb"><img src="assets/images/masonry_sample04.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
    <div class="item x3"> 
      <p class="thumb"><img src="assets/images/masonry_sample05.jpg"></p> 
      <p>ダミーテキスト</p> 
    </div> 
  </div> 
</div>

CSSの記述例

#wrapper { 
  position: relative; 
  max-width: 100%; 
  margin: 0 auto; 
} 
#grid { 
  width: 100%; 
  margin: 0 auto; 
  position: relative; 
} 
.item { 
  margin: 10px; 
  width: 200px; 
  padding: 10px; 
  background: #ddd; 
}
.item.x2 {
  width: 440px;
}
.item.x3 {
  width: 680px;
}
.item .thumb{
  height: 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.item .thumb img { 
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: auto;
}

画像の表示領域として[class=”thumb”]の高さは固定する必要がありますが、これによって表示領域を超えるサイズの画像でも、ちょうど画像の中心が表示されるようにCSSでトリミングできます。

Masonry.jsのデモページ その3