隣り合う要素の高さを統一
同じ要素が連続で並んで表示されたときの高さを左右で統一
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イベントが発生しないことがある。
サンプル
