[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid

Digress

Post on:2015年8月3日

sponsorsr

レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。

minigrid
minigrid -GitHub

minigridのデモ
minigridの使い方

minigridのデモ

デモはカード型のパネルがグリッド状に配置されたシンプルなレイアウトで、一行のアイテム数やスペース（溝）はスクリプトで制御されています。

デモページ

配置する際はアニメーションにも対応しており、表示サイズを変更するとそれに合わせてレイアウトが変更されます。アニメーション無しに設定することもできます。

デモのアニメーション

minigridの使い方

Step 1: 外部ファイル

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

<body>
  ...
  コンテンツ
  ...
  <script src="http://henriquea.github.io/minigrid/minigrid.js"></script>
</body>

Step2 :HTML

各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Step 3: CSS

各classにスタイルシートを設定します。

.grid {
  position: relative;
}
.grid-item {
  position: absolute;
}

Step 4: JavaScript

ラッパーとアイテムを指定し、スクリプトを実行します。

<script>
  (function(){
    minigrid('.grid', '.grid-item');
   
    window.addEventListener('resize', function(){
    minigrid('.grid', '.grid-item');
    });
  })();
</script>

溝のサイズやアニメーションは、下記のように設定します。
デフォルトでは、溝のサイズ: 6、アニメーション: 無し。

<script>
  (function(){
    minigrid('.grid', '.grid-item');
   
    window.addEventListener('resize', function(){
    minigrid('.grid', '.grid-item', 6, animate);
    });
  })();
</script>

アニメーション

アニメーションのタイミングは、CSSで設定します。

.grid-item {
  transition: .3s ease-in-out;
}

アニメーションに更に設定したい場合は、Dynamics.jsを外部ファイルに加えます。

function animate(item, x, y, index) {
  dynamics.animate(item, {
    translateX: x,
    translateY: y
  }, {
    type: dynamics.spring,
    duration: 800,
    frequency: 120,
    delay: 100 + index * 30
  });
}

minigrid('.grid', '.grid-item', 6, animate);