自动生成左侧和顶部的绝对位置css
Auto generate left and top css with absolute position
以以下为例:
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同位素。
相关文章:
- jQuery-仅更改Y轴的CSS背景位置
- css/js:通过滚动固定位置
- 当涉及css缩放时,如何获得页面上的点击位置
- 更改CSS以允许使用Javascript控制DIV位置
- 将Rails后端添加到JS/HTML/CSS应用程序时,正确的文件位置是什么
- 如何将CSS背景位置属性从百分比转换为像素
- 仅在 CSS 向上滚动(与顶部对齐)时修复了 CSS 中的布局位置
- 将CSS应用于在JavaScript中创建的表-表的位置不正确
- CSS.滚动后元素位置发生变化
- 如何使用CSS-webkit动画制作位置动画
- CSS包含+的位置部分离开屏幕
- GWT:如何从当前光标位置或所选文本中获取css样式的属性
- jQuery/CSS在幻灯片之间的转换扰乱了位置:修复了幻灯片内部的性能
- 使用jQuery为位置创建随机css值
- Pdf无法在以下位置使用css分页符:始终
- 使用CSS从相对静态位置编辑画布外的基本侧边栏
- 重新创建 3 列 facebook 风格的部分滚动,然后固定位置 CSS
- 自动生成左侧和顶部的绝对位置css
- IE8显示位置.css错误,但Chrome可以
- 使用Javascript更改背景位置CSS - 小问题