確定浮動元素中的包裹位置

假設我在容器<div>內有六個<div>元素。這六個div中的每一個都是正方形，並且應用了CSS樣式float: left。默認情況下，當他們到達容器邊緣時，它們將包裝。確定浮動元素中的包裹位置

現在，我的問題是，使用Javascript，是否有可能確定包裝是哪個元素？

如果他們像顯示在頁面上：

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

我試圖確定第二個和第三個元素之間發生的包裝。如果你想知道我是否已經失去了理智，我試圖這樣做的原因是，如果其中一個框被點擊，我希望能夠使用一些奇特的jQuery來下拉行間的信息區域。

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

任何關於確定中斷髮生的想法？

P.S.我浮動並讓它自動換行的原因是讓它響應。現在，如果我調整瀏覽器的大小，它會相應地包裝盒子。我不想硬編碼列寬。

[編輯] 由於爆炸丸提供的答案，我能拿出一個解決方案。

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

此輸出在控制檯以下：

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

當我有30個箱，其結束了寬7個箱和5行（最後一行僅2框）

來源

2012-07-09 Jeremy Harris

是浮動的div相對或靜態寬度？ – smilebomb 2012-07-09 18:51:23

靜態寬度，50x50 px – 2012-07-09 18:56:03

只需將容器的寬度除以框的寬度即可。
（假設正方形的寬度相等..）

這將選擇

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.. 
});

演示在http://jsfiddle.net/gaby/kXyqG/

來源

2012-07-09 18:51:48

謝謝你。你認爲這個解決方案比我添加到我的編輯更好嗎？這似乎更復雜...... – 2012-07-09 18:56:46

@Explosion Pills的解決方案是一個完全有效的解決方案..我發佈的可能會更快一點，因爲它使一個計算找到休息。而另一個解決方案需要計算每個調整大小的每個元素的位置。（*我也相信，如果調整大小使得它僅適合每行一個框，則其他解決方案將不起作用。*）這真的取決於什麼你真的想要用它.. – 2012-07-09 19:00:55

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

來源

2012-07-09 18:39:51

非常有趣的概念。這是我所需要的正確方向。這個解決方案當然使用實際的像素寬度。看到我上面的編輯，看看我最終使用。 – 2012-07-09 18:52:40

每一行的最後一個元素，我建議你通過元素迭代，並比較了榜首的位置：

el.position().top;

如果最大值不同 - 此元素位於下一行！

這裏的小提琴：http://jsfiddle.net/J8syA/1/

這種方案的好處是，你不需要知道的元素，填充等的確切像素寬度如果你的CSS將發生變化，該代碼仍然會發現最後元素在行中。

來源

2012-07-09 19:06:56 algiecas

哦，是的，另一個非常好的點！我希望別人嘗試這樣的事情找到這個線索，它有很多很好的答案。 – 2012-07-09 19:43:44

實施例：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); 
};

來源

2015-01-27 20:49:38 Martin

確定浮動元素中的包裹位置

回答

相關問題