$(function () { //一行あたりの要素数=列数を変数に格納 var columns = 4; //該当するli要素の数を取得 var liLen = $('.each_height_adjust').length; //行の数を取得 var lineLen = Math.ceil(liLen / columns); //各li要素の高さの配列 var liHiArr = []; //行の高さの配列 var lineHiArr = []; //liの高さを配列に格納後、それが行の中で一番高い値であれば行の高さとして格納していく繰り返し文 for (i = 0; i <= liLen; i++) { liHiArr[i] = $('.each_height_adjust').eq(i).height(); if (lineHiArr.length <= Math.floor(i / columns) || lineHiArr[Math.floor(i / columns)] < liHiArr[i]) { lineHiArr[Math.floor(i / columns)] = liHiArr[i]; } } //.eachでそれぞれのliの高さを変更 $('.each_height_adjust').each(function(i){ $(this).css('height',lineHiArr[Math.floor(i / columns)] + 'px'); }); });
<div> <ul> <li class="each_height_adjust">1-1</li> <li class="each_height_adjust">1-2</li> <li class="each_height_adjust">1-3</li> <li class="each_height_adjust" style="height:150px;">1-4</li> <li class="each_height_adjust">2-1</li> <li class="each_height_adjust" style="height:100px;">2-2</li> <li class="each_height_adjust">2-3</li> <li class="each_height_adjust" style="height:80px;">2-4</li> </ul> </div>
div { width:400px; } .each_height_adjust { list-style:none; float:left; width:80px; margin:2px; background:#808080; color:#fff; height:50px; }