确定浮动元素中的换行位置

Question

假设我<div>在容器中有六个元素<div>.这六个div中的每一个都是正方形并且float: left应用了CSS样式.默认情况下,当它们到达容器的边缘时,<div>它们将换行.

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

如果它们在页面上显示如下:

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

我试图确定换行发生在第二个和第三个元素之间.如果你想知道我是否已经失去了理智,我试图这样做的原因是如果点击其中一个框,我希望能够通过一些花哨的shQueryy jQuery下拉行之间的信息区域.

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

有关确定中断发生位置的任何想法？

PS我浮动并让它自动换行的原因是为了让它具有响应性.现在,如果我调整浏览器大小,它会相应地包装盒子.我不想硬编码列宽.

[编辑] 由于Explosion Pills提供的答案,我能够提出一个解决方案.

// 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盒)

Answer 1

只需将容器的宽度除以盒子的宽度即可.
(假设正方形宽度相等..)

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

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..
});

演示 http://jsfiddle.net/gaby/kXyqG/

Answer 2

我建议你迭代元素并比较顶部位置:

el.position().top;

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

这是小提琴:http://jsfiddle.net/J8syA/1/

这种解决方案的优点是您不需要知道元素,填充等的确切像素宽度.如果您的css将更改,此代码仍将找到行中的最后一个元素.