Jquery 确定浮动图元中的包裹位置

假设容器中有六个

元素。这六个div中的每一个都是正方形，并且应用了CSS样式

float:left

。默认情况下，当它们到达容器的边缘时，它们将包裹

现在，我的问题是，使用Javascript，是否可以确定包装在哪个元素上

如果它们在页面上显示为：

 ___   ___
| 1 | | 2 |
----- -----
 ___   ___
| 3 | | 4 |
----- -----

我试图确定换行发生在第二个和第三个元素之间。如果你想知道我是不是疯了，我之所以这么做，是因为如果单击其中一个框，我希望能够使用一些奇特的shmansy jQuery在行之间下拉一个信息区域

 ___   ___
| * | | ! |
----- -----
| Someinfo|
 ___   ___
| * | | * |
----- -----

关于确定断裂发生在哪里有什么想法吗

另外，我之所以漂浮并让它自动包装，是为了让它反应灵敏。现在，如果我调整浏览器的大小，它会相应地包装框。我不想硬编码列宽

[编辑] 多亏了爆炸药片提供的答案，我才想出了一个解决办法

// Offset of first element
var first = $(".tool:first").offset().left;
var offset = 0;
var count = 0;

$(".box").each(function () {

   // Get offset            
   offset = $(this).offset().left;

   // If not first box and offset is equal to first box offset
   if(count > 0 && offset == first)
   {
      // Show where break is
  console.log("Breaks on element: " + count);
   }

   // Next box
   count++;
});

此输出在控制台中包含以下内容：

Breaks on element: 7 
Breaks on element: 14
Breaks on element: 21
Breaks on element: 28 

当我有30个盒子时，结果是7个盒子宽5行（最后一行只有2个盒子）

var offset=0；
var last=0；
$（“.wrappable box”）。每个（函数（）{
偏移量=$（this）.offset（）.left；
如果（偏移量<上次）{
//这是包裹后的第一个盒子
}
最后=偏移量；
});

只需将容器的宽度除以盒子的宽度即可。
（假设正方形的宽度相等……）

这将选择每行的最后一个元素

var wrapper = $('.wrapper'),
    boxes = wrapper.children(),
    boxSize = boxes.first().outerWidth(true);

$(window).resize(function(){
    var w = wrapper.width(),
        breakat = Math.floor( w / boxSize); // this calculates how many items fit in a row 

    last_per_row = boxes.filter(':nth-child('+breakat+'n)') // target the last element of each row
    // do what you want with the last_per_row elements..
});

---

演示在

我建议您迭代元素并比较顶部位置：

el.position().top;

如果顶部值不同-此元素位于下一行

这是小提琴：

这种解决方案的优点是，您不需要知道元素、填充等的确切像素宽度。如果css发生变化，此代码仍将找到行中的最后一个元素。

示例：

---

浮动div是相对宽度还是静态宽度？非常有趣的概念。这是我在正确的方向上所需要的推动力。当然，此解决方案使用实际像素宽度。请参阅上面的编辑以查看我最终使用的内容。谢谢。您认为此解决方案比我添加到编辑中的解决方案好吗？这似乎更复杂，@爆炸药丸的解决方案是完全有效的。。我发布的那个可能会快一点，因为它只需进行一次计算就可以找到断点。而另一种解决方案需要计算每个元素在每次调整大小时的位置。。（我还认为，如果调整大小使其每行仅适合一个框，则其他解决方案将不起作用。）这取决于您实际想要对其执行的操作。哦，是的，另一个非常好的观点！我希望其他尝试类似的东西的人能找到这个线索，它有很多好的答案。

el.position().top;

function getLastElementInRow(el) {

    var top = el.offset().top,
        next = el.next();

    if (next.size() == 0)
        return el;

    var nextTop = next.offset().top;

    if (nextTop > top)
        return el;

    return getLastElementInRow(next);
};