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', '');   
        });
    }

这将在大多数情况下起作用。但是，如果我从页面加载位置调整多个媒体查询的大小，它不会改变初始窗口调整大小的边距。在它摆脱那个讨厌的底部边缘之前，我必须再次稍微调整大小。为什么需要两次调整大小？

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 回答