1
GossipGirl 2011-08-17 15:03:34 +08:00
都2011年了
|
2
phzzy 2011-08-17 15:35:54 +08:00
|
3
Platinum 2011-08-17 15:36:28 +08:00
http://www.w3schools.com/cssref/css_selectors.asp
不知道啥叫 交错布局,但总之 css3 选择器是用来干这事的 比方说 li:nth-of-type(2n+1) { float: left; } li:nth-of-type(2n+0) { float: right; } |
4
sigone OP |
6
sigone OP |
7
unstop 2011-08-17 16:04:43 +08:00
http://masonry.desandro.com 一个JQ插件,可以实现这个排版效果。我个人认为,只用CSS是不行的。
|
8
blueforyou 2011-08-17 16:09:51 +08:00
@phzzy貌似实现不了
|
9
marvyn 2011-08-17 16:17:35 +08:00
jQuery masonary 插件实现
|
11
NemoAlex 2011-08-17 16:37:02 +08:00
要我做的话,不用那么麻烦
一个ul固定宽度,4个li固定宽度,浮动,分成4列,里面填高度不等的div好了 你给的网站是每个li绝对定位的,top和left值写上去 这个可以后端算好写出来,也可以前端用JS写 方法有很多,不是什么难事 |
12
bigdude 2011-08-17 16:39:55 +08:00
楼主,你都给出实例页面了,也不分析分析人家怎么实现的?
sodao用的是等宽四栏,每个元素纵向排列就实现了你说的“交错布局” 不用js,也不用高级css选择器,这只是一个很简单的布局问题 |
13
loading 2011-08-17 17:15:29 +08:00
css选择器可以做到,而ie是残疾的,再而是js是万能的,用js替代css选择器,让js给每个li加入class,如li-1,li-2,li-3...etc.
回去有空我写过demo吧,现在坐车 |
14
sigone OP |
16
leojoy710 2011-08-17 18:19:40 +08:00
masonry是兼容所有浏览器的啊...
|
18
leojoy710 2011-08-17 18:31:15 +08:00
@sigone ie6看都是正常的...可能是网络问题或者演示问题吧...他的首页就是用了masonry的...看首页就行...
|
19
sigone OP |
20
loading 2011-08-17 19:02:10 +08:00
在电脑上看过了,也明白了 @sigone 口中的交错布局, @phzzy 所介绍的插件就是最简便最规范的解决方法了。对于ie8无效,建议检查是否禁用js等。
如果要自己再造个轮子,会js也不会太难。 得到ul容器的宽度,可算得一行可以容纳li的个数N,li设置左浮动,js找出第一行浮动元素中最高的个,得出高度heightM,这样我们就知道第二行元素浮动时的初始位置了,然后根据上一行同样位置(如同为行中的第二个)元素的高度和左上角的坐标(这个css里叫那个啥。。。)就可以算出第二行这个位置元素需要向上移动的距离了,margin-top:-xx;就可以了。如此类推。。。 这只是我自己的算法,没留意那个插件的算法。 没有js辅助,当前最新的CSS3标准也办不到,更别说ie这个垃圾浏览器了。 顺带一提:你可以看下CSS3的选择器,看能选择到什么,css不就是选择嘛。当遇到你要的选择器在你的客户浏览器不支持时,可以用js辅助,给元素加个class,当让,后台加就更简单了。 如这个jQuery辅助的奇数选择: $("li:odd").addClass("li-odd"); 就算浏览器不支持 li:odd 这样的高级选择器,我们也可以通过js把他们选到然后给这些元素加上一个"li-odd"。 ==EOF== |
21
loading 2011-08-17 19:04:43 +08:00
@sigone 你可以看下http://www.swinton.me/ 的代码,有条件注释,低于IE7有惊喜。。。
|
23
Platinum 2011-08-17 19:35:22 +08:00
二楼 phzzy 的已经是正解了,我是发完贴才看到他的回复(几乎同时回的)
你要的效果必须用 JS,我以为你是问相间条纹之类样式,所答非所问 这种应该不叫交错吧……感觉应该叫填充式布局…… |