如何模擬一個浮動：在javascript頂部

我有一個項目，我想漂浮，但理想情況下，我希望他們堆疊從上到下，從左到右的大型列表。浮動左堆棧從左到右，從上到下。如何模擬一個浮動：在javascript頂部

如何在本地代碼或jQuery中模擬JavaScript中的CSS float：top屬性？

示例代碼：

<style> 
*{margin:0;padding:0;} 
ul { 
    height:80px; 
    width:350px; 
    margin:10px; 
    padding:0; 
    outline:1px solid; 
} 
li{ 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:3px 5px; 
} 
</style> 
<ul> 
    <li>1679</li> 
    <li>1682</li> 
    <li>1732</li> 
    <li>1761</li> 
    <li>1773</li> 
    <li>1781</li> 
    <li>1788</li> 
    <li>1791</li> 
    <li>1797</li> 
    <li>1799</li> 
    <li>1832</li> 
    <li>1861</li> 
    <li>1873</li> 
    <li>1879</li> 
    <li>1881</li> 
    <li>1882</li> 
    <li>1888</li> 
    <li>1891</li> 
    <li>1897</li> 
    <li>1899</li> 
    <li>1932</li> 
    <li>1932</li> 
    <li>1961</li> 
    <li>1961</li> 
</ul>

有一個類似的問題here，但它似乎是在尋找更多的是CSS的解決方案，而不是基於解決方案的JS。另外this question是佈局修復的更具體的實現。

來源

2012-01-17 Dan Gayle

我感到困惑的問題是什麼的窗口大小調整/改變。你說你想讓它們從上到下，從左到右，這正是左邊的浮動。所以有什麼問題？ – Geuis 2012-01-17 04:03:40

'float：top'是什麼？只有4個選項：左，右，無，或繼承。 – Sang 2012-01-17 04:09:13

@Sang - 沒有浮動頂部，這只是他將*想*存在的描述符。 – mrtsherman 2012-01-17 04:10:19

所以，有些東西你可以做的是循環遍歷所有的李時珍，並要將其定位他們...

var origionalX = 100; 
var origionalY = 200; 
var columns = 10; 
$("li").each(function(i){ 
    var x = origionalX+parseInt(i/columns)*$(this).width(); 
    var y = origionalY+(i%columns)*$(this).height(); 
    $(this).css({position : "absolute", left : x, top : y}); 
});

希望這將有助於一點點。如果你想要更具體的東西，隨時評論，我會看看我是否可以幫助。：]

來源

2012-01-17 04:14:32 BananaNeil

您能否想到一種方法可以在不事先設置列數的情況下執行此操作？ – 2012-01-17 10:32:06

你想用什麼作爲你的能指？你可以很容易地設置列= total_width_of_area/width_of_each_item – BananaNeil 2012-01-17 11:17:21

是的，這聽起來更合理。在我的確切情況下，寬度實際上可以變化。雖然固定高度。 – 2012-01-17 21:49:03

您需要查看css3多列。 http://caniuse.com/#search=column

https://developer.mozilla.org/en/CSS3_Columns

來源

2012-01-17 04:15:02 Geuis

使用JavaScript就可以做出明智的columms。下面是會適應不同的高度和每個L1的寬度，確保順利列的jsfiddle：http://jsfiddle.net/rgthree/hAeQ2/

var list, currentColLeft, currentColTop, nextColWidth; 
currentColLeft = currentColTop = nextColWidth = 0; 
list = $('ul#list'); 
$('ul > li').each(function(i, el){ 
    var h, w; 
    h = $(el).outerHeight(); 
    w = $(el).outerWidth(); 
    if(currentColLeft + w > nextColWidth){ 
     nextColWidth = currentColLeft + w; 
    } 
    if(currentColTop + h > list.innerHeight()){ 
     currentColTop = 0; 
     currentColLeft = nextColWidth; 
     nextColWidth = 0; 
    } 
    $(el).css({'float':'none','position':'absolute','top':currentColTop,'left':currentColLeft}); 
    currentColTop += h; 
});

來源

2012-01-17 04:34:07 rgthree

這看起來很有前途。謝謝！ – 2012-01-17 10:32:34

不要重新發明輪子！

http://masonry.desandro.com/

jQuery的砌體不正是你描述。而且實現起來非常容易。不過，您可能需要稍微修改標記。

來源

2012-01-17 06:52:22

我以前見過jQuery Masonry。我一定會檢查一下，看看它是否會做我需要的。 – 2012-01-17 10:28:05

這很適合我，叫上表

function layout(oList) { 
    var column = 0, 
     top = 0, 
     bottomMargin=20, 
     width = 300; 

     $(oList).each(function() { 
      if (top !=0 && $(this).height() + top > $(window).height()) { 
       top = 0; 
       column += 1; 
      } 
      $(this).css("top", top + "px"); 
      $(this).css("left", (column * width) + "px"); 
      top = top + $(this).height() + bottomMargin; 
     } 
    ); 

}

來源

2012-07-15 11:35:25

如何模擬一個浮動：在javascript頂部

回答

相關問題