以以下为例:
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同位素。