Determinare la posizione di avvolgimento in elementi fluttuati

Question

Diciamo che ho sei elementi all'interno di un contenitore <div>. Ciascuno di questi sei div è un quadrato e ha lo stile CSS float: left applicato. Per impostazione predefinita, quando raggiungono il bordo del contenitore, <div> verranno completati.

Ora, la mia domanda è, utilizzando Javascript, è possibile determinare a quale elemento è l'involucro?

Se si visualizzano sulla pagina come:

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

Sto cercando di determinare che l'involucro si verifica tra il secondo e il terzo elemento. Nel caso ti stia chiedendo se ho perso la testa, la ragione per cui sto provando a farlo è se si fa clic su una di quelle caselle, voglio essere in grado di rilasciare un'area informazioni tra le righe con qualche jQuery di shmansy di fantasia.

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

Qualche idea su come determinare dove si verifica l'interruzione?

P.S. Il motivo per cui sto fluttuando e lasciandolo avvolgere automaticamente è renderlo reattivo. In questo momento se ridimensiono il browser, avvolge le scatole di conseguenza. Non voglio le larghezze delle colonne del codice duro.

[EDIT] Grazie alla risposta fornita da Explosion Pills, sono riuscito a trovare una soluzione.

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

Questa uscita seguente nella console:

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

Quando avevo 30 scatole, che si è rilevata un'ampia 7 scatole e 5 righe (ultima riga solo 2 scatole)

Answer 1

Basta dividere la larghezza del contenitore per la larghezza delle caselle.
(assumendo che i quadrati siano di uguale larghezza ..)

Questo selezionerà l'ultimo elemento di ogni 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 ahttp://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

vi consiglio di iterare attraverso gli elementi e confrontare la prima posizione:

el.position().top; 

Se il valore superiore è diverso - questo elemento si trova sulla riga successiva!

Ecco il violino: http://jsfiddle.net/J8syA/1/

Il vantaggio di questa soluzione è che non hai bisogno di sapere esatte larghezze di pixel di elementi, imbottiture, ecc Se il vostro css cambierà, questo codice sarà ancora trovare l'ultimo elemento nella riga.

Answer 4

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