【javasript】要素の高さをそろえる関数 7/7更新
高さをそろえる関数
探してもjQueryばかりだったのでjavascriptのみで高さをそろえられる関数を作ろうとしました。
目標
第一引数に揃えたい要素、第二引数に何個ずつそろえるかを指定し、
引数を変更するだけで高さを揃えられるようにする。
heightEquality('揃えたい要素',何個ずつそろえるか);
7/7
以下は新しく調整したものです
ただレスポンシブに対応しようと思ってwindow.onresizeを指定すると、リサイズ時に高さが減っていってしまうので究明中です
/*-----------高さをそろえる関数-----------*/ function heightEquality(your_element,cellsNum){ var element = document.getElementsByClassName(your_element); var elements = []; var columns = []; var j = 0; //.elementの高さを配列に挿入 for(var i = 0; i < element.length; i++){ elements[i] = element[i].clientHeight; } //.elementをcellsNum組みずつ取り出す for(var i = 0; i < (elements.length / cellsNum);i++){ columns[i] = elements.splice(0, cellsNum); console.log(your_element,columns[i]); //多次元配列の中の配列を値の大きい順にソート columns[i].sort( function(a,b){ return(a < b ? 1 : -1); } ); } //多次元配列の中の最初の値(最大の高さ)を各組に代入 //要素をcellsNum組ずつある分だけループ for(var i = 0; i < columns.length; i++){ //cellsNum個目の要素までで一番高いheightを適用 for(var k = 0; k < cellsNum; k++){ element[k + j].style.height = columns[i][0] + 'px'; } j += cellsNum; } }
前のコード
2つの要素までしか対応できてませんでした
code
function heightEquality(your_elements,cellsNum){ var element = document.getElementsByClassName(your_elements); var elements = []; var columns = []; var j = 0; for(var i = 0; i < element.length; i++){ elements[i] = element[i].clientHeight; } for(var i = 0; i < (elements.length / cellsNum);i++){ columns[i] = elements.splice(i, cellsNum); columns[i].sort( function(a,b){ return(a < b ? 1 : -1); } ) } for(i = 0; i < columns.length; i++){ element[j].style.height = columns[i][0] + 'px'; element[j+1].style.height = columns[i][0] + 'px'; j += cellsNum; } }