javascript - 有什么方法可以判断 float 元素是否已向下移动？

Question

想象一个响应式菜单，其中的元素设置为 float 。比如说，它们都是 150 像素宽。随着菜单宽度的减小，各个元素将一个接一个地向下移动到下一行。

您正在尝试确定某个元素是否已被降低。我的想法是以这样一种方式设计事物，我可以找出 float 元素的顶部是否!= 0。如果不是，则它被向下撞到下一行。我还可以评估元素高度以确定元素是否在第 2、3 行等中。

是否有更简单的方法来确定 float 元素是否由于父宽度限制而被包裹/向下碰撞？

Answer 1

我会尝试找到元素 f.e 的偏移量。这样:

$(window).on('resize', function () {
    $(".some-menu-item-selector").each(function(e) {
       elementOffset = $(this).offset().top,
       $(this).html(elementOffset); 
    });
});

现在，当我有偏移量时，我可以按“行”对元素进行分组。只有一个假设:元素具有相同的高度。否则，事情会变得复杂。