MJLで要素の高さ揃えをする際、次のように指定を行うと3個ごとに最も高い要素へ揃えるようにするようになります。
MJL.enable.heightEqualizer("js-equalize", { groupBy: 3 });今構築している案件でこの機能を利用しようとしたのですが、レスポンシブWebデザインを採用しているため、例えばPCでは3カラムで表示していても、タブレットでは2カラムで表示することになり、きれいに高さ揃えができないことに気付きました。これがきっかけで、ビューポートの幅によってgroupByの指定値を変化させ、何個ごとに高さ揃えをするか変えることができないか検討してみました。
JavaScriptでメディアクエリを利用する
つい先日、エ・ビスコム・テック・ラボ著「スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)」で、CSSOMが紹介されていました（※）。.matchMedia()を利用すると、JavaScriptでメディアクエリの機能を利用できる仕様のようです。これを使うのがベストだと考え、次のようなコードを書いたところ、ビューポートが945px以上の場合は要素3個ごとに高さ揃え、ビューポートが945px未満の場合は要素2個ごとに高さ揃えをするように設定できました。
- 先月行われたHTML5 Conference 2012の矢倉さんのスライドにも載っていましたね。
サンプルコード
(function () {
var instances,
setGroupByVal;
setGroupByVal = function () {
var i,
nInstances = instances.length,
nGroup;
if (window.matchMedia("(min-width: 945px)").matches) {
nGroup = 3;
} else {
nGroup = 2;
}
for (i = 0; i < nInstances; i += 1) {
instances[i].options.groupBy = nGroup;
instances[i].set();
}
};
MJL.event.add(window, "load", function () {
instances = MJL.enable.heightEqualizer("js_equalize");
setGroupByVal();
});
window.matchMedia("(min-width: 945px)").addListener(setGroupByVal);
}());デモ
Firefox（またはGoogle Chrome最新版）でご覧下さい。レスポンシブデザインビューに切り替えた場合は、一度リロードが必要なようです。
課題など
デモの閲覧に「Firefox（またはGoogle Chrome最新版）で」と書いたことからお気づきと思いますが、ブラウザによってはまだ実装されていない機能です（特にメディアクエリリスナー）。ただ、matchMedia() polyfillとしてGitHubで「paulirish/matchMedia.js」が公開されているので、対応していないブラウザでも利用することができそうです。しかし、メディアクエリリスナーのpolyfillでは1秒ごとのインターバルで状態をチェックするようなコードが書かれており、いくらかデバイスのリソースを消費するものと考えられので注意が必要かと考えました。
CSSOMは興味深い仕様ですので、仕様書をチェックするなどして理解を深めたいと考えています。