jquery – 确定浮动元素中的包装位置

假设我有六个÷ div容器内的元素< div>.这六个div中的每一个都是一个正方形,并且具有CSS样式float：left apply.默认情况下,当它们到达容器的边缘< div>他们会包装.

现在,我的问题是,使用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 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/

原文地址：https://www.jb51.cc/jquery/176690.html