[JS]jQueryのMasonry風レイアウトをスタイルシートで簡単に調整できるスクリプト -Salvattore

高さの異なるパネルをレンガ状に一定の間隔で配置するjQueryのプラグイン「Masonry」風レイアウトを簡単に実装できるように、スタイルシートで調整できるスクリプトを紹介します。

スタイルシートベースなので、レスポンシブ対応もMedeia Queriesを利用できます。

Salvattore
Salvattore -GitHub

• Salvattoreのデモ
• Salvattoreの使い方

Salvattoreのデモ

デモはSafari, Chrome, Firefoxなどのモダンブラウザ、IEは9+でご覧ください。

デモページ：幅1200pxで表示

デモは480px, 820px, 1300pxごとに最適に表示されるようにスタイルシートで設定されています。

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

デモページ：幅480pxで表示

コンテンツをダイナミックに追加・削除することもできます。

デモページ：Dynamic content

下部の「Appended」と「Prepended」をクリックすると、コンテンツが追加・削除されます。

デモページ：Dynamic content

コンテンツはさりげないアニメーションで追加・削除されます。

Salvattoreの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="js/salvattore.js"></script>

Step 2: HTML

HTMLは単にパネルを並列に配置するだけで、ラッパーに「data-columns」を加えます。

<div id="timeline" data-columns>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
  <div>Item #4</div>
  <div>Item #5</div>
</div>

Step 3: CSS

コラム数はスタイルシートで設定します。
レスポンシブ対応にするには、Media Queriesを利用して設定します。

#timeline[data-columns] {
    content: '2';
}

@media screen and (min-width: 601px){
  #timeline[data-columns] {
    content: '3';
  }
}

各コラムのデフォルトのclassは「.column」で、それを再定義することもできます。

#timeline[data-columns] {
  content: '2 .col.one-half';
}

@media screen and (min-width: 601px){
  #timeline[data-columns] {
    content: '3 .col.one-third';
  }
}

Step 4: JavaScript

ダイナミックにコンテンツを追加・削除する場合は、スクリプトで指定します。

var grid = document.querySelector('#timeline');
var item = document.createElement('article');

salvattore['append_elements'](grid, [item])
item.outerHTML = 'I’ve been appended!';

「append_elements」と「prepend_elements」でそれぞれ追加・削除が可能で、gridとitemを追加・削除できます。