Ermitteln Sie die Position des Wrap in floated Elementen

Question

Nehmen wir an, ich habe sechs <div> Elemente in einem Container <div>. Jedes dieser sechs divs ist ein Quadrat und hat den CSS-Stil float: left angewendet. Wenn sie den Rand des Containers <div> erreichen, werden sie standardmäßig umbrochen.

Nun ist meine Frage, mit Javascript, ist es möglich zu bestimmen, bei welchem ​​Element der Wrap ist?

Wenn sie auf der Seite angezeigt werden wie:

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

Ich versuche, um zu bestimmen, dass die Umhüllung zwischen dem zweiten und dem dritten Element auftritt. Wenn Sie sich fragen, ob ich meinen Verstand verloren habe, ist der Grund, warum ich das versuche, wenn eines dieser Kästchen angeklickt wird, ich möchte in der Lage sein, einen Infobereich zwischen den Zeilen mit etwas schickem shmansy jQuery abzusetzen.

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

Haben Sie Ideen, wo der Bruch auftritt?

P.S. Der Grund, warum ich schwebe und es automatisch wrap lasse, ist, es reaktionsfähig zu machen. Wenn ich jetzt die Größe des Browsers ändere, werden die Boxen entsprechend umgebrochen. Ich möchte die Spaltenbreiten nicht hart codieren.

[EDIT] Dank der Antwort von Explosion Pills, war ich in der Lage, eine Lösung zu finden.

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

Dieser Ausgang der folgende in der Konsole:

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

Wann hatte I 30 Boxen, die 7-Boxen breit ist endete und 5 Reihen (letzte Zeile nur 2 Boxen)

Answer 1

Teilen Sie einfach die Breite des Behälters durch die Breite der Kästen.
(vorausgesetzt, die Quadrate sind von gleicher Breite.)

Dieser wählt das letzte Element jeder Zeile

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 beihttp://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

Ich schlage vor, Sie durch die Elemente iterieren und die Top-Position vergleichen:

el.position().top; 

Wenn der obere Wert abweicht - dieses Element befindet sich in der nächsten Reihe!

Hier ist die Geige: http://jsfiddle.net/J8syA/1/

Der Vorteil einer solchen Lösung ist, dass Sie dieser Code genau Pixel nicht Breiten von Elementen, Polsterungen, etc. Wenn Ihr CSS wird sich ändern, wird noch die letzte finden wissen müssen Element in der Zeile.

Answer 4

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