Określ położenie okładki w elementach pływających

Question

Załóżmy, że mam sześć elementów <div> wewnątrz kontenera <div>. Każdy z tych sześciu elementów div jest kwadratem i ma zastosowany styl CSS: float: left. Domyślnie, gdy dotrą do krawędzi kontenera <div>, zawiną się.

Moje pytanie brzmi, używając JavaScriptu, czy możliwe jest określenie, w którym elemencie znajduje się wrap?

Jeśli wyświetli się na stronie, takich jak:

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

Próbuję ustalić, że okład występuje pomiędzy drugim i trzecim elemencie. Jeśli zastanawiasz się, czy straciłem rozum, powodem, dla którego próbuję to zrobić, jest kliknięcie jednego z tych pól, chcę móc rozwinąć obszar informacyjny między wierszami z fantazyjnym sharonowym jQuery.

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

Jakieś pomysły dotyczące ustalania miejsca wystąpienia przerwy?

P.S. Powodem, dla którego się poruszam i pozwalam na automatyczne zawijanie, jest to, aby był responsywny. Teraz, jeśli zmieniam rozmiar przeglądarki, odpowiednio zawija pola. Nie chcę sztywnych szerokości kolumn.

[EDIT] Dzięki odpowiedzi udzielonej przez Explosion Pills, udało mi się wymyślić rozwiązanie.

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

Wyjście następujące w konsoli:

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

Kiedy miał 30 pudełka, który okazał się być 7 skrzynki szerokości 5 rzędów (ostatniego rzędu jedynie 2 pola)

Answer 1

Po prostu podziel szerokość kontenera przez szerokość pól.
(zakładając, że kwadraty mają jednakową szerokość ..)

To będzie wybrać ostatni element każdego wiersza

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

Proponuję wykonać iterację elementów i porównać najwyższej pozycji:

el.position().top; 

Jeśli wartość najwyższa różni się - ten element jest w następnym rzędzie!

Oto skrzypce: http://jsfiddle.net/J8syA/1/

Zaletą takiego rozwiązania jest to, że nie trzeba znać dokładne szerokości piksela elementów, uszczelek itp Jeśli css zmieni, to kod będzie jeszcze znaleźć ostatni element w rzędzie.

Answer 4

przykład: 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); 
};