初めまして。 制作担当のマッキーです。

このブログでは様々なJavaScriptプラグイン、 ライブラリについてご紹介していきたいと思います。
HTMLやCSSは何となくわかるけどJavaScriptはよくわからないよという方でも簡単に導入できるものを多く紹介しようと思います。

まず第1回目はレスポンシブのカード型レイアウトを簡単に実現できる「Minigrid.js」 です。 jQuery等の他のライブラリに依存していない軽量なライブラリです。
さっそく使用例を紹介します。

<!--HTML-->
<div class="cards">
<div class="card"> 1
</div>
<div class="card"> 2
</div>
<div class="card"> 3
</div>
<div class="card"> 4
</div>
<div class="card"> 5
</div>
</div>
<!--HTML-->

<!--JavaScript-->
<script src="https://npmcdn.com/minigrid@3.0.3/dist/minigrid.min.js">
</script>
<script>
//< ![CDATA[
(function() {
var grid; //ページが読み込まれる時に行われる処理
function init() {
grid = new Minigrid({
container: '.cards',//←ここで外側のdivのクラス名を設定(例の場合だとcards)
item: '.card', //←ここで内側のdivのクラス名を設定(例の場合だとcard)
gutter: 12 //←ここで内側のdiv同士の隙間を設定
});
grid.mount();
}
function update() {
grid.mount();
}
document.addEventListener('DOMContentLoaded', init);
window.addEventListener('resize', update);
}
)();
// ]]>
</script>
<!--JavaScript-->

見て頂きたいのは<script>～</script>の部分です。
「←ここで●●を設定」と書かれた3か所を書き換えるだけで↓に表示されているようなレスポンシブでカードがうねうね動くレイアウトが実現できます(ブラウザの幅を変えてみてください)。

1
2
3
4
5

カードを並べたようなレイアウトを作る際はお試し下さい。
それでは本日はこのへんで。