Xác định vị trí quấn trong các phần tử nổi

Question

Giả sử tôi có sáu thành phần <div> bên trong một vùng chứa <div>. Mỗi sáu div này là một hình vuông và có kiểu CSS float: left được áp dụng. Theo mặc định, khi chúng đạt đến cạnh của vùng chứa <div>, chúng sẽ được bao bọc.

Bây giờ, câu hỏi của tôi là, bằng cách sử dụng Javascript, có thể xác định yếu tố nào được bao bọc không?

Nếu họ hiển thị trên trang như:

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

Tôi đang cố gắng để xác định rằng quấn xảy ra giữa các yếu tố thứ hai và thứ ba. Trong trường hợp bạn đang tự hỏi liệu tôi có bị mất trí hay không, lý do tôi đang cố gắng làm điều này là nếu một trong các hộp đó được nhấp vào, tôi muốn có thể thả xuống một vùng thông tin giữa các hàng với một số jQuery khéo léo.

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

Bất kỳ ý tưởng nào về việc xác định nơi xảy ra vi phạm?

P.S. Lý do tôi đang nổi và để cho nó tự động quấn là làm cho nó đáp ứng. Ngay bây giờ nếu tôi thay đổi kích thước trình duyệt, nó kết thúc tốt đẹp các hộp cho phù hợp. Tôi không muốn chiều rộng cột mã cứng.

[EDIT] Nhờ câu trả lời được cung cấp bởi Explosion Pills, tôi đã có thể đưa ra giải pháp.

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

sản lượng này như sau trong giao diện điều khiển:

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

Khi tôi có 30 hộp, mà kết thúc lên được 7 hộp rộng và 5 hàng (hàng cuối cùng chỉ có 2 ô trống)

Answer 1

Chỉ cần chia chiều rộng của vùng chứa theo chiều rộng của các hộp ..
(giả sử các hình vuông có chiều rộng bằng nhau ..)

này sẽ chọn phần tử cuối cùng của mỗi hàng

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 tạihttp://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

tôi đề nghị bạn để lặp qua các yếu tố và so sánh vị trí hàng đầu:

el.position().top; 

Nếu giá trị cao nhất khác nhau - phần tử này nằm trên hàng tiếp theo!

Đây là fiddle: http://jsfiddle.net/J8syA/1/

Ưu điểm của giải pháp này là bạn không cần phải biết độ rộng điểm ảnh chính xác của các yếu tố, miếng đệm, vv Nếu css của bạn sẽ thay đổi, mã này vẫn sẽ tìm thấy cuối cùng yếu tố trong hàng.

Answer 4

Ví dụ: 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); 
};