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

假设我在容器

有六个

元素。 这六个div中的每一个都是一个正方形，并且CSS样式为float: left applied。 默认情况下，当它们到达容器

的边缘时，它们将换行。

现在，我的问题是，使用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会改变，这段代码仍然会找到行中的最后一个元素。

Answer 3

 var offset = 0; var last = 0; $(".wrappable-box").each(function () { offset = $(this).offset().left; if (offset < last) { //this is the first box after a wrap } last = offset; }); 

Answer 4

示例： http ： //jsfiddle.net/gvL5ybsq/

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