Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

画面サイズに応じてカラムの高さを揃えてくれるjQueryプラグインを作った

作ったもの

今回は画面幅に応じて指定したカラム数ごとに高さを調整してくれるjQueryプラグインをつくりました。
たとえば、スマートフォンの時は2カラムずつ高さをそろえて、PCの時は4カラムずつ高さを揃えることができます。
また、画面幅を縮めた際にもその画面幅に応じてカラムの高さを揃えてくれます。

省エネ

$(window).resizeをイベントリスナーとして使用しているのですが、リサイズが終わった段階で、命令が発動するようにしています。
また複数メソッドが使用されても$(window).resizeは一度しか登録されません。

使い方

$(".js-autoAlign").autoAlign({
    columns:2,
    columnsTablet:[768,3],
    columnsDesktopSmall:[980,4],
    columnsDesktop:[1200,6]
});

Bootstrapなどを使っている人はピンと来る作りになっています。
上の場合だと、画面幅が768px未満の場合は2カラム、画面幅が768px以上980px未満なら3カラム、980px以上1200px未満なら4カラム、1200px以上だと6カラムずつカラムの高さを揃えます。

ソース

今回作ったプラグインはgithubで公開しています。みなさんよろしければ是非使ってみてください



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド