https://rs-nagano.net/assets/js/fixHeight.js

1/*
2 * fixHeight - jQuery Plugin
3 * http://www.starryworks.co.jp/blog/tips/javascript/fixheightjs.html
4 *
5 * Author Koji Kimura @ STARRYWORKS inc.
6 * http://www.starryworks.co.jp/
7 * 
8 * Licensed under the MIT License
9 *
10 */
11(function($){
12
13	var parents = [];		      	// 親要素
14	var isInitialized = false;	// 初期化済みフラグ
15	var textHeight = 0;	    		// 文字のサイズ
16	var $fontSizeDiv;		      	// 文字のサイズ取得用div
17	
18	//------------------------------------------------------------
19	// jQuery プラグイン
20	//------------------------------------------------------------
21	$.fn.fixHeight = function( i_force ) {
22		init();
23
24		this.each(function(){
25			var childrenGroups = getChildren( this );
26			var children = childrenGroups.shift() || [];
27			
28			//$childrenのY座標が同じものは同じ高さに
29			var rows = [[]];
30			var top = 0;
31			var c=0;
32			var $c;
33			
34			for ( c=0; c<children.length; c++ ) {
35				$c = $(children[c]);
36				var i;
37				if ( top != $c.offset().top ) {
38					for ( i=0; i<rows.length; i++ ) if ( !$(rows[i]).data("fixedHeight") || i_force ) $(rows[i]).sameHeight().data("fixedHeight",true);
39					rows = [[]];
40					top = $c.offset().top;
41					for ( i=0; i<childrenGroups.length; i++ ) rows.push([]);
42				}
43				rows[0].push(children[c]);
44				for ( i=0; i<childrenGroups.length; i++ ) {
45					rows[i+1].push(childrenGroups[i][c]);
46				}
47			}
48			if ( rows[0] && rows[0].length ) for ( i=0; i<rows.length; i++ ) $(rows[i]).sameHeight();
49
50			parents.push( $(this) );
51		});
52
53		return this;
54	};
55
56	//------------------------------------------------------------
57	// 同じ高さに揃えるjQueryプラグイン
58	//------------------------------------------------------------
59	$.fn.sameHeight = function() {
60		var maxHeight = 0;
61		this.css("height","auto");
62		this.each(function(){
63			if ( $(this).height() > maxHeight ) maxHeight = $(this).height();
64		});
65		return this.height(maxHeight);
66	};
67	
68	//------------------------------------------------------------
69	// フォントサイズの変更時やウィンドウのリサイズ時に高さを揃える処理を実行
70	//------------------------------------------------------------
71	$.checkFixHeight = function( i_force ) {
72		if ( $fontSizeDiv.height() == textHeight && i_force !== true ) return;
73		textHeight = $fontSizeDiv.height();
74		if ( parents.length ) $(parents).fixHeight( i_force );
75	}
76	
77	//------------------------------------------------------------
78	// [private] フォントサイズ確認用のDIV追加とタイマーセット
79	//------------------------------------------------------------
80	function init() {
81		if ( isInitialized ) return;
82		isInitialized = true;
83		$fontSizeDiv = $('body').append('<div style="position:absolute;left:-9999px;top:-9999px;">s</div>');
84		setInterval($.checkFixHeight,1000);
85		$.checkFixHeight();
86		$(window).on("resize",$.checkFixHeight);
87		$(window).on("load",$.checkFixHeight);
88	}
89	
90	//------------------------------------------------------------
91	// [private] 処理すべき子要素のグループを取得
92	//------------------------------------------------------------
93	function getChildren( i_parent ) {
94		var $parent = $( i_parent );
95
96		//既にデータが存在すればそれを返す
97		//if ( $parent.data("fixHeightChildrenGroups") ) return $parent.data("fixHeightChildrenGroups");
98
99		//子グループを格納する配列
100		var childrenGroups = [];
101
102		//fixHeightChildクラスを持つ子要素を取得
103		var $children = $parent.find(".fixHeightChild");
104		if ( $children.length ) childrenGroups.push( $children );
105
106		//fixHeightChildXXXクラスを持つ子要素を取得
107		var $groupedChildren = $parent.find("*[class*='fixHeightChild']:not(.fixHeightChild)");
108		if ( $groupedChildren.length ) {
109			var classNames = {};
110			$groupedChildren.each(function(){
111				var a = $(this).attr("class").split(" ");
112				var i;
113				var l = a.length;
114				var c;
115				for ( i=0; i<l; i++ ) {
116					c = a[i].match(/fixHeightChild[a-z0-9_-]+/i);
117					if ( !c ) continue;
118					c = c.toString();
119					if ( c ) classNames[c] = c;
120				}
121			});
122			for ( var c in classNames ) childrenGroups.push( $parent.find("."+c) );
123		}
124
125		//子要素の指定がない場合は直属の子を取得
126		if ( !childrenGroups.length ) {
127			$children = $parent.children();

128			if ( $children.length ) childrenGroups.push( $children );
129		}
130
131		return childrenGroups;
132	}
133
134})(jQuery);
135
136jQuery(document).ready(function(){
137$('.fixHeight').fixHeight();
138});