自動生成的絕對位置

Question

左側和頂部的CSS使用這些作爲例子：

http://www.truedigital.co.uk
http://www.tinsels.fr
http://www.pinterest.com

在那裏我看見箱子在每條信息中列好整齊的定位，我試圖用各種方法來做到這一點，但是我所做的每個專欄都不能完全像網站上那樣。

它看起來像他們使每個字段框使css左和頂自動值，並在每個盒子上使用絕對定位。使用javascript/jquery的可能性，是否有一個JavaScript的例子，就像他們用來使css的值在網站上保持原狀一樣？

Answer 1

不需要重新發明輪子。

您正在尋找Masonry插件。

Answer 2

這似乎是他們正在使用的：jQuery Isotope。 希望這有助於。沿着線

Answer 3

東西：

i = 0; 
columnwidth = 300; 
$('.box').each(function(){ 
    i++; 
    if (i > 4){ 
     i = 1; 
    } 
    $(this).addClass('column-' + i); 
    $(this).css('left', (i-1) * columnwidth + 'px'); 

    columnheight = 0; 
    $('column-' + i).each(function(){ 
     columnheight += $(this).css('height'); 
    } 

    $(this).css('height', columnheight + 'px'); 
}); 

看這裏：

這是因爲我離開辦公室衝去，它可能會無法正常工作。這應該讓你知道你將不得不做些什麼來達到你想要的效果。