Bootstrapのグリッドシステムを動的に判定する #JavaScript

row内のcol-に対してなにか処理したい場合、デバイスサイズによってカラム数が変わると上手くいかないことがあります。
例えば高さ揃えの処理の場合、row内の全てのcol-で判定するので思わぬレイアウトの崩れが発生します。

そこで各行ごとに判定できるように改修します。

行をどうやって判定する？

今回はここが肝です。

ポイントは4つ

現在のデバイスサイズを判定する
col-クラス一式を取得し、何が設定されているか分別する。
妥当なcol-クラスを選択し、カラム数を取得
12カラム構成の判定をする

このまま上から順に処理を作れば実現できます。

下準備

下準備としてDeviceオブジェクトを用意します。
これはbootstrapで扱う情報をまとめているようなものです。

// デバイス判定用 Bootstrap "xs" "sm" "md" "lg"
var Device = {};
Device.SP = "xs";
Device.TB = "sm";
Device.PC = "md";
Device.LG = "lg";

Device.SIZE_SP = 768;
Device.SIZE_TB = 992;
Device.SIZE_PC = 1200;

デバイスタイプを調べる

ではこれを利用して、デバイスの種類を判定します。
ちなみに判定結果はbootstrapの"xs"、"sm"、"md"、"lg"です。
処理はこんな感じ

function getDeviceMode() {
    var window_width = $(window).width();
    var device = Device.SP;
    if(window_width > Device.SIZE_SP) device = Device.TB;
    if(window_width > Device.SIZE_TB) device = Device.PC;
    if(window_width > Device.SIZE_PC) device = Device.LG;
    return device;
}

これでデバイスサイズが分かりました

col-クラスを取得する

取得したクラスはハッシュで管理します。
null判定入れておいたほうが、後々便利です。

function getClassDic(scope){
    var classes     = $(scope).attr("class");
    var classDic   = {};

    var xs = classes.match(/col-xs-\d+/);
    var sm = classes.match(/col-sm-\d+/);
    var md = classes.match(/col-md-\d+/);
    var lg = classes.match(/col-lg-\d+/);
    classDic["xs"] = (xs) ? xs.toString() : null;
    classDic["sm"] = (sm) ? sm.toString() : null;
    classDic["md"] = (md) ? md.toString() : null;
    classDic["lg"] = (lg) ? lg.toString() : null;
    return classDic;
}

デバイスサイズから妥当なcol-クラスを見つける

先ほど作ったハッシュデータから引っ張ります。ついでに正規表現で数値データを取得します。

if(classDic[device]){
  return Number(classDic[device].match(/\d+/));
}

関数にすると、こんな感じでしょうか。

function getColumnNumber(device, classDic){
    if(classDic[device]){
        return Number(classDic[device].match(/\d+/));
    }
    var n = classDic[Device.SP];
    if(classDic[Device.TB]) n = classDic[Device.TB];
    if(classDic[Device.PC]) n = classDic[Device.PC];
    if(classDic[Device.LG]) n = classDic[Device.LG];
    return Number(n.match(/\d+/));
}

行を判定する

最後に行を判定します。
カラムナンバーを加算して12で判定をかければできます。


var MAX_COLS = 12; // 12カラム
var currentCols = 0;

$('.row').children().each(function(index, value){
   var classDic   = getClassDic(value);
   currentCols += getColumnNumber(device, classDic);

   // 12カラム構造を判定
   if(currentCols == MAX_COLS){
      console.log("改行発生");
   }
});