Determine la ubicación de la envoltura en los elementos flotados

Question

Digamos que tengo seis elementos <div> dentro de un contenedor <div>. Cada uno de estos seis divs es un cuadrado y tiene aplicado el estilo CSS float: left. De forma predeterminada, cuando alcanzan el borde del contenedor <div> se envolverán.

Ahora, mi pregunta es, mediante Javascript, ¿es posible determinar en qué elemento está la envoltura?

Si se muestran en la página como:

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

Estoy tratando de determinar que la envoltura se produce entre el segundo y el tercer elemento. En caso de que se pregunte si he perdido la razón, la razón por la que estoy tratando de hacer esto es si se hace clic en una de esas casillas, quiero poder desplegar un área de información entre las filas con algún jQuery extravagante.

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

¿Alguna idea sobre determinar dónde se produce la ruptura?

P.S. La razón por la que estoy flotando y dejar que se autoenvuelva es hacerlo receptivo. En este momento, si cambio el tamaño del navegador, envuelve los cuadros en consecuencia. No quiero codificar el ancho de las columnas.

[EDIT] Gracias a la respuesta proporcionada por las píldoras de explosión, que era capaz de llegar a una solución.

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

Esta salida lo siguiente en la consola:

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

Cuando tenía 30 cajas, que terminó siendo 7 cajas de ancho y 5 filas (última fila sólo 2 cajas)

Answer 1

Simplemente divida el ancho del contenedor por el ancho de las casillas ..
(asumiendo que los cuadrados son del mismo ancho.)

Esto seleccionará el último elemento de cada fila

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 enhttp://jsfiddle.net/gaby/kXyqG/

Answer 2

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 3

le sugiero que para iterar a través de elementos y comparar la posición superior:

el.position().top; 

Si el valor superior es diferente, ¡este elemento se encuentra en la siguiente fila!

Aquí está el violín: http://jsfiddle.net/J8syA/1/

La ventaja de esta solución es que usted no necesita saber anchos de píxeles exactos de elementos, rellenos, etc. Si el CSS va a cambiar, este código se va a encontrar la última elemento en la fila.

Answer 4

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