自動生成具有絕對位置的左側和頂部的CSS

Question

以這些為例：

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

在那里，我看到每個帖子的專欄位置都很好，位置整齊，我嘗試使用多種方式來做到這一點，但是我制作的每個專欄都不能完全與網站上的一樣。

看起來它們使每個字段框都具有自動值，並且通過在每個框上使用絕對定位使CSS靠左和靠上。 使用javascript / jquery的可能性，是否有一個javascript的示例，例如它們用來使網站上的css left和top auto的值像網站上一樣？

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

看這里：

我要離開辦公室時，這很着急，可能無法正常工作。 這應該使您了解實現所需效果所必須采取的措施。