如何用JavaScript判斷一些dom節點是否浮動：左邊還是下降到一條新線？

我遇到了一些dom節點，它們浮動：就像這個頁面上主要的電影網格，http://trailers.apple.com/。主柵格由許多鋰項目組成。每個李項浮動的左邊，因爲CSS是：如何用JavaScript判斷一些dom節點是否浮動：左邊還是下降到一條新線？

#trailers li { 
float: left; ...

我怎樣才能從Javascript告訴我們，如果一個HTML DOM元素浮動左邊或者下降到一個新行？

來源

2013-08-31 Phil

不知道你可以做這個沒有一些計算... – elclanrs

如果它與基於x和y的計算完成，那麼它可能是錯誤的，因爲這個網站http://trailers.apple.com/的電影海報都是許多li項目的一部分帶有float：left。 x變化並且y在每一行上變化，x和y都變化，那麼我們該如何解決？ – Phil

通過給列表項目一個固定的高度，您可以精確地計算出與容器相關的頂部偏移量。他們似乎固定在該Apple頁面上。 – elclanrs

你可以使用jQuery通過運行一個遍歷所有列表項的函數來檢查它，並且檢查一個li的頂部偏移值與其前一個兄弟的頂部偏移值的比較。這是一個jQuery，它跳過第一個li（因爲它沒有以前的兄弟），並在每個li上設置一個紅色背景，其頂部偏移值高於其前一個兄弟的頂部偏移值。

$("li").each(function() { 
    if (!$(this).is("li:first-child")) { 
     if ($(this).offset().top > $(this).prev().offset().top) { 
      $(this).css('background-color', 'red'); 
     } 
    } 
});

這裏有一個jsFiddle展示如何做到這一點的工作。調整容器大小後，您將不得不再次運行此操作。這裏有一個jsFiddle顯示當列表項目具有不同的高度時會發生什麼。除非將「新行」定義爲「從容器左側開始」，否則它仍然有效。在這種情況下，您可以改爲檢查左偏移值。

$("li").each(function() { 
    if ($(this).offset().left < 100) { 
     $(this).css('background-color', 'red'); 
    } 
});

_{* 100是這裏的li的寬度，也可以是小於第二li的線路上的左偏移值低的任何值。}

這裏有一個jsFiddle顯示這種方法。

來源

2013-08-31 10:20:54

如何用JavaScript判斷一些dom節點是否浮動：左邊還是下降到一條新線？

回答

相關問題