隣り合う要素の高さを統一

同じ要素が連続で並んで表示されたときの高さを左右で統一

jQuery

$(function () { var odd_height = 0; var even_height = 0; // 画像総数 var i = $('img').length - 1; // 最終画像のロード後実行 $($('img')[i]).on('load', function(){ $('li').each(function(){ // 左右の高さを取得 if ($(this).is(':nth-child(odd)')) { odd_height = $(this).height(); } else { even_height = $(this).height(); // 要素の高さを高い側に設定 if (odd_height > even_height) { $(this).prev().css('height', odd_height + 'px'); $(this).css('height', odd_height + 'px'); } else if (odd_height < even_height) { $(this).prev().css('height', even_height + 'px'); $(this).css('height', even_height + 'px'); } } }); }).each(function() { // IEキャッシュ対応 if (this.complete) { $(this).load(); } }); });

IEで画像がキャッシュされているとloadイベントが発生しないことがある。

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について