さぁ!検索しよう!

隣合う要素の高さを自動で揃えて配置させるjQueryプラグイン「tile.js」をレスポンシブWebデザインに対応させる方法です。

tile.jsは通常、以下のように高さを揃える対象の要素とカラム数を指定し、使用します。

HTML

<div class="contents">
	<div class="post"></div>
	<div class="post"></div>
	<div class="post"></div>
	<div class="post"></div>
</div>

CSS

.contents {
	width:600px;
}
.post {
	float:left;
	width:50%;
}

jQuery

$(function(){
	$('.post').tile(2);
});

しかしレスポンシブWebデザインのサイトで使う場合では、1カラム時でも実行されてしまうことや、ブラウザウィンドウのサイズが変化すると表示が崩れてしまうといった不具合が起こります。

そのようなことを避けるために、スクリプトの記述を下記に変更します。

$(function(){
	var tabWidth = 768,
	pcWidth = 1024;

	if(pcWidth <= $(this).width()){
		  $(window).load(function() {
			$('.post').tile(3);
		  });
	}else if (tabWidth <= $(this).width()) {
	  $(window).load(function() {
		$('.post').tile(2);
	  });
	}
	$(window).resize(function(){
		if(pcWidth <= $(this).width()){
			$('.post').tile(3);
		}else if (tabWidth <= $(this).width()) {
			$('.post').tile(2);
		}else {
			$('.post').removeAttr('style');
		}
	});
});

ポイント

タブレットとPCの横幅を想定した数値を変数に代入しています。

var tabWidth = 768,
pcWidth = 1024;

ブラウザウィンドウの幅が1024pxより大きければ、1行の要素数を3として高さを揃えています。

また$(window).load(function() {としてから実行させることで、画像等すべての要素を読み込み終わってから算出し、高さを揃えるようにしています。

if(pcWidth <= $(this).width()){
	$(window).load(function() {
		$('.post').tile(3);
	});
}

ブラウザウィンドウの幅が768pxより大きければ、1行の要素数を2として高さを揃えています。

else if (minWidthTab <= $(this).width()) {
	$(window).load(function() {
		$('.post-box').tile(2);
	});
}

$(window).resize(function(){で、ブラウザウィンドウが伸縮されたときの処理を実行し、伸縮に応じて高さが揃うようにしています。

$('.post').removeAttr('style');は、ブラウザウィンドウの幅が768pxより小さければ、1カラムとしてtile.jsによって付与されたスタイルを削除し、tile.jsを適用させないようにしています。

$(window).resize(function(){
	if(pcWidth <= $(this).width()){
		$('.post').tile(3);
	}else if (tabWidth <= $(this).width()) {
		$('.post').tile(2);
	}else {
		$('.post').removeAttr('style');
	}
});

以上で、tile.jsをレスポンシブWebデザインに対応させる方法を終わります。