[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js

Post on:2013年6月18日

sponsorsr

画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。

Mason.jsの特徴
Mason.jsのデモ
Mason.jsの使い方

Mason.jsの特徴

Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。
他のスクリプト（Masonry, Isotopeなど）グリッドのレイアウトを使う時に生まれる隙間や端にも穴がない状態でレイアウトすることが可能です。

類似スクリプトで生じる隙間も埋めます。

比率: 全てのエレメントのベースとなる比率を設定
サイズ: グリッドに応じたサイズを設定
カラム: 複数のブレイクポイントごとにカラムを設定
フィルター: 空白スペースを埋めるための要素を設定
ガター: エレメント間の溝を設定

Mason.jsのデモ

ページには至るところにスクリプトが使用されています。
例えば、ファーストビューの「Donwload」の直下。

Mason.js

全てのパネルは隙間を等間隔にして、配置されています。

サイズを変更すると、配置も変更されます。

デモページを幅780pxで表示

デモは他にも専用ページが用意されています。

デモ：Fruid

デモ：Fixed

デモ：Fluid Gutters

Mason.jsの使い方

Step 1: 外部ファイル

スクリプトをhead内に配置します。

<head>
  ...
  <script src='js/jquery.js'></script>
  <script src='js/mason.min.js'></script>
</head>

Step 2: HTML

各パネルはdiv要素で実装し、それらをdivで内包します。

<div id='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
  <div class='box'>5</div>
  <div class='box'>6</div>
  <div class='box'>7</div>
  <div class='box'>8</div>
</div>

Step 3: CSS

最低限必要なスタイルシートです。

#container {
    width: 100%
    position: relative;
}
.box {
    float: left;
    background-color: #00ffff;
    position: relative;
}

Step 4: JavaScript

jQueryのセレクタでラッパー（#container）を指定し、スクリプトを実行します。

$("#container").mason({
    itemSelector: ".box",
    ratio: 1.5,
    sizes: [
        [1,1],
        [1,2],
        [2,2],
    ]
});

オプションでは各アイテムのセレクタ、比率、サイズ、ブレイクポイントごとのカラム数、空白箇所の処理、レイアウトの種類などを設定できます。

$("#container").mason({
    itemSelector: ".box",
    ratio: 1.5,
    sizes: [
        [1,1],
        [1,2],
        [2,2],
    ],
    columns: [
        [0,480,1],
        [480,780,2],
        [780,1080,3],
        [1080,1320,4],
        [1320,1680,5]
    ],
    filler: {
        itemSelector: '.fillerBox',
        filler_class: 'custom_filler'
    },
    layout: 'fluid',
    gutter: 10
},function(){
    console.log("COMPLETE!")
});