确定浮动元素中的换行位置 [英] Determine wrap location in floated elements

问题描述

假设我在容器< div> 中有六个< div> 这六个div中的每一个都是一个正方形，并且应用了CSS样式 float：left 。默认情况下，当它们到达容器< div> 的边缘时，它们会自动换行。

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

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

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

我试图确定包裹发生在第二和第三元件之间。如果你想知道我是否失去了我的想法，我试图这样做的原因是如果其中一个框被点击，我想能够下降一个信息区域之间的行与一些奇怪的猥琐jQuery。 / p>

  ___ ___ 
 | * | | ！ | 
 ----- ----- 
 | Someinfo | 
 ___ ___ 
 | * | | * | 
 ----- ----- 
  

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

我浮动和让它自动换行的原因是使其响应。现在如果我调整浏览器的大小，它包装盒相应。我不想硬编码列宽。

由于Explosion Pills提供的答案能够提出一个解决方案。

  //第一个元素的偏移
 var first = $（。 tool：first）。offset（）。left; 
 var offset = 0; 
 var count = 0; 
 
 $（。box）。each（function（）{
 
 //获取偏移
 offset = $（this）.offset ; 
 
 //如果不是第一框并且偏移等于第一框偏移
 if（count> 0&& offset == first）
 {
 //显示中断位置
 console.log（Breaks on element：+ count）; 
} 
 
 //下一个框
 count ++; 
}）; 
  

这会在控制台中输出以下内容：

 元素中断：7 
元素中断：14 
元素中断：21 
元素中断：28 
  

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

解决方案

只要将容器的宽度除以框的宽度即可。

（

<$ p <$ p <$ p <$ p <$ p

var wrapper = $（'。wrapper'），
boxes = wrapper.children（），
boxSize = boxes.first

$（window）.resize（function（）{
var w = wrapper.width（），
breakat = Math.floor（w / boxSize）; // this计算行中有多少项目

last_per_row = boxes.filter（'：nth-​​child（'+ breakat +'n）'）//定位每一行的最后一个元素
/ /做你想用的last_per_row元素..
}）;


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

Let's say I have six <div> elements inside a container <div>. Each of these six divs is a square and have the CSS style float: left applied. By default, when they reach the edge of the container <div> they will wrap.

Now, my question is, using Javascript, is it possible to determine at which element the wrap is?

If they display on the page like:

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

I'm trying to determine that the wrap occurs between the second and third element. In case you are wondering if I have lost my mind, the reason I am trying to do this is if one of those boxes is clicked, I want to be able to drop down an info area between the rows with some fancy shmansy jQuery.

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

Any ideas on determining where the break occurs?

P.S. The reason I am floating and letting it auto wrap is to make it responsive. Right now if I resize the browser, it wraps the boxes accordingly. I don't want to hard code column widths.

[EDIT] Thanks to the answer provided by Explosion Pills, I was able to come up with a solution.

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

This output the following in the console:

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

When I had 30 boxes, which ended up being 7 boxes wide and 5 rows (last row only 2 boxes)

解决方案

Just divide the width of the container by the width of the boxes..
(assuming the squares are of equal width..)

This will select the last element of each row

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

Demo at http://jsfiddle.net/gaby/kXyqG/

这篇关于确定浮动元素中的换行位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！