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

Auto generate left and top css with absolute position

本文关键字:位置 css 顶部 自动生成      更新时间:2023-09-26

以以下为例:

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

在那里我看到一列盒子的每个帖子都很好地定位整齐,我试图用各种方法做到这一点,但我所做的每个盒子列不能完全像在网站上一样。

看起来他们使每个字段框的css left和top与自动值和使用绝对定位在每个框。使用javascript/jquery的可能性,是否有一个javascript的例子,就像他们用来使CSS的值左和顶部自动像在网站上?

没有必要重新发明轮子。

您正在寻找砌体插件。

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

看这里:

这是我离开办公室时匆忙写的,它可能不会工作。这应该让你知道你需要做些什么来达到你想要的效果。

这似乎是他们正在使用:jQuery同位素。