1

li 画像が左に浮いているリストがあり、ウィンドウのサイズに応じて異なる数の行に配置されます (メディアクエリと異なる img サイズを使用)。要素間の垂直方向の間隔は、下マージンを使用して指定します。ただし、一番下の行に表示されるリスト項目には下マージンは必要ありません。フッターの上に余白が残りすぎます。JQuery を使用して、一番下の行のアイテムの下マージンを取り除く (おそらく非効率的な) 方法を見つけました。

    bottomMargin();
    window.onresize = bottomMargin;

    function numberOfRows () {
        var noOfRows = 0;
        $('#gallery ul li').each(function() {
            if($(this).prev().length > 0) {
                if($(this).position().top != $(this).prev().position().top)
                    noOfRows++;
            }
            else
                noOfRows++;
        });
        return noOfRows;
    }

    function whichRow() {
        var thisRow = 0;
        $('#gallery ul li').each(function() {
            if($(this).prev().length > 0) {
                if($(this).position().top == $(this).prev().position().top) {
                    $(this).data('row', thisRow);
                }   
                else {
                    thisRow++;
                    $(this).data('row', thisRow);
                }       
            }
            else {
                thisRow++;
                $(this).data('row', thisRow);
            }
        }); 
    }

    function bottomMargin() {                       
        whichRow();
        var totalRows = numberOfRows();
        $('#gallery ul li').each(function () {
            if ($(this).data('row') == totalRows)
                $(this).css('margin-bottom', '0%');
            else
                $(this).css('margin-bottom', '');   
        });
    }

ほとんどの場合、これでうまくいきます。ただし、ページがロードされた場所から離れた場所で複数のメディアクエリのサイズを変更すると、最初のウィンドウのサイズ変更のマージンは変更されません。その厄介な下マージンを取り除く前に、もう一度サイズを少し変更する必要があります。なぜ 2 回のサイズ変更が必要なのですか?

4

1 に答える 1

0

うーん、ブラウザが実際にページの描画を完了する前に、計算を行ってマージンを適用すること、またはタイミングに関連する何かの競合のように聞こえます。サイズ変更コールバックを調整してみてください。

var resizeTimer = 0;

$(window).on('resize', function() {
  clearTimeout( resizeTimer );
  resizeTimer = setTimeout(bottomMargin, 30);
})

function bottomMargin() {
  ...
}
于 2012-09-28T03:37:15.130 に答える