on:2013年6月18日sponsors画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。-GitHubMason.jsの特徴Mason.jsのデモMason.jsの使い方Mason.jsの特徴Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。Isotopeなど)グリッドのレイアウトを使う時に生まれる隙間や端にも穴がない状態でレイアウトすることが可能です。類似スクリプトで生じる隙間も埋めます。空白スペースを埋めるための要素を設定ガターエレメント間の溝を設定Mason.jsのデモページには至るところにスクリプトが使用されています。ファーストビューの「Donwload」の直下。Mason.js全てのパネルは隙間を等間隔にして、配置されています。サイズを変更すると、配置も変更されます。デモページを幅780pxで表示デモは他にも専用ページが用意されています。外部ファイルスクリプトをhead内に配置します。HTML各パネルはdiv要素で実装し、それらをdivで内包します。CSS最低限必要なスタイルシートです。JavaScriptjQueryのセレクタでラッパー(#container)を指定し、スクリプトを実行します。]});オプションでは各アイテムのセレクタ、比率、サイズ、ブレイクポイントごとのカラム数、空白箇所の処理、レイアウトの種類などを設定できます。