0

3 つ.items_rowの div があり、それぞれに 4 が含まれ、.itemそれぞれ.itemに.item_img. 次のスクリプトを使用して、.item_imgeach.itemのそれぞれで最も高いものを見つけ、最も高い高さからそれぞれの最も短い高さを引いた.items_row最も短いものに下マージンを追加します。.item_img

$('.items_row').each(function(){
    var tallestimg = -1;
    $(this).children().each(function() {
        $(this).find('.item_img').each(function(i) {
            tallestimg = $(this).height() > tallestimg ? $(this).height() : tallestimg;
            if ($(this).height() < tallestimg) {
                $(this).css({ 'margin-bottom': tallestimg - $(this).height() });
            }
        });
    });
});

スクリプトは私が望むとおりに機能しますが、最も高い.item_imgdivが最初の.itemdivにない場合、最短のdivはまったく取得margin-bottomされません。たとえば、最も高い.item_imgdiv が の 2 番目.itemにある.items_row場合、その.item_img前の . は無視されmargin-bottomます。何か案は？

4

4 に答える 4

1

最も高い前に画像のマージンボトムを設定していないため、ソリューションは機能しません。画像が最も短いものから最も高いものの順に並べ替えられている場合、すべての画像の margin-bottom = 0 になります。

最初に最も高い画像を検索し、次に画像を繰り返し処理して、必要な margin-bottom を適用する必要があります。

私はこれがうまくいくと思います：

$('.items_row').each(function(){
    var tallestimg = -1;
    $(this).children().each(function() {
        $(this).find('.item_img').each(function(i) {
            tallestimg = $(this).height() > tallestimg ? $(this).height() : tallestimg;            
        });
    });

    $(this).children().each(function() {
        $(this).find('.item_img').each(function(i) {
            if ($(this).height() < tallestimg) {
                $(this).css({ 'margin-bottom': tallestimg - $(this).height() });
            }
        });
    });


});
于 2012-12-19T09:01:34.540 に答える
0

これを試して：

$('.items_row').each(function() {
    var $rowItems = $('.items', this)

    // get the height of the tallest .item in the row
    var maxHeight = $rowItems.map(function(index, element) {
        return $(element).height();
    }).get();

    // apply the required margin-bottom to each .item
    $rowItems.each(function() {
        $(this).css({ 'margin-bottom': maxHeight - $(this).height() })
    });
});
于 2012-12-19T08:58:21.340 に答える
0

最初に最も高い画像を取得します。

var max_height = Math.max.apply(
    null,
    $('.item_img').map(function(ix, el){ 
        return $(el).height(); 
    }).get()
)

次にマージンを適用します。

$('.item_img').each(function(){
    $(this).css({'margin-bottom': max_height - $(this).height()});
});
于 2012-12-19T09:03:24.127 に答える
0

これを参照してください：http://jsfiddle.net/pPTkL/1/

$('.items_row').each(function() {
 var height= -1;
 $(this).find('.item_img').each(function() {
     height = Math.max(height, $(this).height()); 
 });

 $(this).find('.item_img').each(function() {
     $(this).css('margin-bottom',(height - $(this).height()));
 });
});​
于 2012-12-19T09:18:07.817 に答える