PAGETOP

レスポンシブなグリッドレイアウトを簡単に実装できる超軽量のスクリプト「minigrid」

レスポンシブなグリッドレイアウトを簡単に実装できる超軽量のスクリプト「minigrid」

ギャラリーサイトやポートフォリオ、ブログまで幅広く使えるグリッドレイアウトを簡単に、しかも超軽量なスクリプトで実装できる「minigrid」をご紹介します。画面サイズが変わると自動的に並び直して、きれいに整列します。

「minigrid」デモ

これは、画面サイズに合わせてアニメーションなしで配置が入れ替わるタイプです。

「minigrid」デモ・アニメーション付き

こちらはアニメーション付き。少し遅れてカードがパタパタと入れ替わり、あるべき場所に落ち着きます。

ダウンロード

GitHubから最新版をダウンロードできます。2015年8月現在で1.4.1が最新です。
中のスクリプトを見てみると、コードは69行、サイズは2kbと非常にシンプル。

使い方

①

まずはアイテムを並べます。
アイテム一つひとつを任意のclass名を付与したdivで記述し、それらをさらに任意のclassまたはid名を付与した親divで囲みます。
classやid名は実行コードで紐づけるので、なんでも構いません。ただし、子classは同じ名前で統一しておきます。

<div class="親classまたはid">
<div class="子class"></div>
<div class="子class"></div> 
<!--省略-->
</div>

②

スクリプトを読み込みます。
ダウンロードしたフォルダの中には、「index.js」という名前で入っています。
読み込む場所は<head>内でも<body>内でも構わないようですが、デモではコンテンツより後の<body>内になっています。

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

③

スクリプトの読み込み行の後に、実行コードを記述します。
実行コードもシンプルです。下の例は親classを「grid」、子classを「grid-item」とした場合。

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

親をclassではなくidにした場合。

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

④

アニメーションを付けたい場合は、子クラスのcssに下記を追加します。
タイミングはお好みに合わせてください。

.子クラス {
   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);

いかがでしょうか。
軽量でシンプルなので、他のライブラリとも組み合わせやすいのではないでしょうか。グリッドレイアウトのサイトを制作する際はぜひ試してみてください。

jQueryについて, WEBデザイン