Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid

Post on:2019年1月16日

Magic Gridの特徴

Magic Gridは、高さが異なるアイテムでもグリッドに揃えてレイアウトすることができます。高さを調整するために、下部に異なるスペースは必要ありません。

高さが揃っていたり、たくさんの行にそれぞれが何行にまたがっているか定義できる場合はCSS GridやFlexboxで簡単に実装できますが、完全に高さが異なるアイテムをレンガ状に配置するMasonryスタイルのレイアウトを実装するのは不可能です。

Magic Gridでは非常にシンプルなHTMLで、簡単に実装できます。

Magic GridはVue.jsでも利用できます。

Vue Magic Grid -GitHub

Magic Gridのデモ

デモではMagic Gridの気持ちいいグリッドを楽しめます。

デモページ -JSFiddle

Magic Gridの使い方

Step 1: 外部ファイル

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

<script src="magic-grid.min.js"></script>

1	<script src="magic-grid.min.js"></script>

スクリプトはCDNにも用意されています。

<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>

1	<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>

Step 2: HTML

グリッド用のHTMLを用意し、コンテナは参照できるようにclassやidを付与します。

  <div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
    <div class="item9">9</div>
    <div class="item10">10</div>
    <div class="item11">11</div>
    <div class="item12">12</div>
    <div class="item13">13</div>
  </div>

</div>

Step 3: JavaScript

スクリプトを初期化し、オプションを定義します。
まずは、静的コンテンツの場合。

let magicGrid = new MagicGrid({
  container: "#container", // 必須: containerをclass, id, HTML要素で定義
  static: true, // 静的コンテンツの場合は必須
  animate: true, // オプション
});

magicGrid.listen();

let magicGrid = new MagicGrid({

container: "#container", // 必須: containerをclass, id, HTML要素で定義

static: true, // 静的コンテンツの場合は必須

animate: true, // オプション

});

magicGrid.listen();

コンテナに動的にロードされたコンテンツがない場合、つまりそのすべての子要素が常にDOM内にある場合は、グリッドを初期化します。

動的コンテンツの場合。

let magicGrid = new MagicGrid({
  container: "#container", // 必須: containerをclass, id, HTML要素で定義
  items: 20, // 動的コンテンツの場合はアイテム数を定義
  animate: true, // オプション
});

magicGrid.listen();

let magicGrid = new MagicGrid({

container: "#container", // 必須: containerをclass, id, HTML要素で定義

items: 20, // 動的コンテンツの場合はアイテム数を定義

animate: true, // オプション

});

magicGrid.listen();

何らかの理由でコンテナがAPIからのデータに依存している、または遅延が発生する場合は、そのコンテンツをDOMにレンダリングする前に、期待するアイテム数をグリッドに定義します。

スクリプトのオプションではグリッドのさまざまな設定が定義できます。

let magicGrid = new MagicGrid({
  container: "#container", // 必須: containerをclass, id, HTML要素で定義
  static: false, // 静的コンテンツの場合は必須、デフォルトはfalse
  items: 30, // 動的コンテンツの場合はアイテム数を定義
  gutter: 30, // オプション: アイテム間の溝、デフォルトは25(px).
  maxColumns: 5, // カラムの最大数、デフォルトはInfinite.
  useMin: true, // グリッドにアイテムを揃える時は短い列を優先、デフォルトはfalse.
  animate: true, // アイテムを配置する際のアニメーション、デフォルトはfalse.
});