确定浮动元素中的包裹位置

假设我在容器<div>内有六个<div>元素。这六个div中的每一个都是正方形，并且应用了CSS样式float: left。默认情况下，当他们到达容器边缘时，它们将包装。确定浮动元素中的包裹位置

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

如果他们像显示在页面上：

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

我试图确定第二个和第三个元素之间发生的包装。如果你想知道我是否已经失去了理智，我试图这样做的原因是，如果其中一个框被点击，我希望能够使用一些奇特的jQuery来下拉行间的信息区域。

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

任何关于确定中断发生的想法？

P.S.我浮动并让它自动换行的原因是让它响应。现在，如果我调整浏览器的大小，它会相应地包装盒子。我不想硬编码列宽。

[编辑] 由于爆炸丸提供的答案，我能拿出一个解决方案。

// 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框）

来源

2012-07-09 Jeremy Harris

是浮动的div相对或静态宽度？ – smilebomb 2012-07-09 18:51:23

静态宽度，50x50 px – 2012-07-09 18:56:03

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

这将选择

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/

来源

2012-07-09 18:51:48

谢谢你。你认为这个解决方案比我添加到我的编辑更好吗？这似乎更复杂...... – 2012-07-09 18:56:46

@Explosion Pills的解决方案是一个完全有效的解决方案..我发布的可能会更快一点，因为它使一个计算找到休息。而另一个解决方案需要计算每个调整大小的每个元素的位置。（*我也相信，如果调整大小使得它仅适合每行一个框，则其他解决方案将不起作用。*）这真的取决于什么你真的想要用它.. – 2012-07-09 19:00:55

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

来源

2012-07-09 18:39:51

非常有趣的概念。这是我所需要的正确方向。这个解决方案当然使用实际的像素宽度。看到我上面的编辑，看看我最终使用。 – 2012-07-09 18:52:40

每一行的最后一个元素，我建议你通过元素迭代，并比较了榜首的位置：

el.position().top;

如果最大值不同 - 此元素位于下一行！

这里的小提琴：http://jsfiddle.net/J8syA/1/

这种方案的好处是，你不需要知道的元素，填充等的确切像素宽度如果你的CSS将发生变化，该代码仍然会发现最后元素在行中。

来源

2012-07-09 19:06:56 algiecas

哦，是的，另一个非常好的点！我希望别人尝试这样的事情找到这个线索，它有很多很好的答案。 – 2012-07-09 19:43:44

实施例：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); 
};

来源

2015-01-27 20:49:38 Martin

确定浮动元素中的包裹位置

回答

相关问题