使用绝对位置自动生成左侧和顶部css

Question

以这些为例：

  

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

点击这里：

当我离开办公室时，这很匆忙，它可能无法正常工作。这应该可以让您了解为达到预期效果所需要做的工作。