【Javascript】ウインドウサイズによって指定した数値の整数倍にwidthを調整する

straightline bookmarkというサイトを見ていて、div#wrapperがウインドウサイズに追随して変わるのですが320px、640px、960px・・・と320の整数倍で変わっていることに気付きました。

div#wrapper内の要素が固定幅ならきれいにレイアウトできる仕組みだと思い、自分でもスクリプトを書いてみました。

ADs

(function($){

$(function(){

var base = 200; //この数値の整数倍になる。200なら200,400,600・・・

var obj = $('#contents'); //widthを設定する要素

$(window).on('resize load',function(){

var winw = $(window).width();

//ウインドウサイズ÷基準となる数値の小数点を切り捨て、その結果×基準となる数値で「ウィンドウサイズに収まり基準値の整数倍」が導ける。

//ウィンドウサイズが200以下のときは0になってしまうので、2項演算子で0のときは200にする。

var objw = Math.floor(winw/base)*base || base;

obj.css('width',objw + 'px');

//確認用なので別にいらない

$('#winw').html(winw + 'px');

$('#objw').html(objw + 'px');

});

})(jQuery);

あとはdiv#contentsに対してmargin: 0 auto;を指定しておけば、ウィンドウサイズに応じてwidthが可変でかつ中央揃えとなります。jQuery Masonryプラグインと組み合わせて使うと面白いかもしれません。

単純な計算だけなので大したコードでもないですが、可変グリッドやレスポンシブデザインでも使えるテクニックかもしれません。

ADs

コメントはまだありません。

【Javascript】ウインドウサイズによって指定した数値の整数倍にwidthを調整する | Wood-Roots:blog