只用 <ul><li></li> ..... <li></li></ul> 如何能实现 li 的交错布局

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 4846 天前的主题，其中的信息可能已经有所发展或是发生改变。

li 的宽度是固定的

.....

23 条回复 • 1970-01-01 08:00:00 +08:00

GossipGirl

2011-08-17 15:03:34 +08:00

都2011年了

phzzy

2011-08-17 15:35:54 +08:00

http://masonry.desandro.com/
可以参考这个

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

sigone

2011-08-17 15:43:50 +08:00

@Platinum

如这样 http://www.swinton.me/
关键是能否适用于所有浏览器

sigone

2011-08-17 15:44:18 +08:00

@phzzy ie 似乎没有效果

sigone

2011-08-17 15:46:29 +08:00

@Platinum

这样 http://show.sodao.com/

能不能只用一个 <ul></ul> 来实现

unstop

2011-08-17 16:04:43 +08:00

http://masonry.desandro.com 一个JQ插件，可以实现这个排版效果。我个人认为，只用CSS是不行的。

blueforyou

2011-08-17 16:09:51 +08:00

@phzzy貌似实现不了

marvyn

2011-08-17 16:17:35 +08:00

jQuery masonary 插件实现

sigone

2011-08-17 16:26:18 +08:00

@unstop ie无效

NemoAlex

2011-08-17 16:37:02 +08:00

要我做的话，不用那么麻烦
一个ul固定宽度，4个li固定宽度，浮动，分成4列，里面填高度不等的div好了
你给的网站是每个li绝对定位的，top和left值写上去
这个可以后端算好写出来，也可以前端用JS写
方法有很多，不是什么难事

bigdude

2011-08-17 16:39:55 +08:00

楼主，你都给出实例页面了，也不分析分析人家怎么实现的？
sodao用的是等宽四栏，每个元素纵向排列就实现了你说的“交错布局”
不用js，也不用高级css选择器，这只是一个很简单的布局问题

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吧，现在坐车

sigone

2011-08-17 17:46:26 +08:00

@bigdude

我指的是他的排布方式, 而不是他的代码, 我的想法是只在前台通过简单的代码就能让 li 如此排列, 而不是通过程序再加一个父div 或者 li

sigone

2011-08-17 17:46:56 +08:00

@loading
希望能分享一下解决方案 ^_^

leojoy710

2011-08-17 18:19:40 +08:00

masonry是兼容所有浏览器的啊...

sigone

2011-08-17 18:23:45 +08:00

@leojoy710 为什么我用 i8 看他的演示没有效果呢?

leojoy710

2011-08-17 18:31:15 +08:00

@sigone ie6看都是正常的...可能是网络问题或者演示问题吧...他的首页就是用了masonry的...看首页就行...

sigone

2011-08-17 19:00:45 +08:00

@leojoy710

如果是i6打开 http://www.swinton.me/ 直接提示使用 Firefox/Safari/Chrome

你是那个演示地址

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==

loading

2011-08-17 19:04:43 +08:00

@sigone 你可以看下http://www.swinton.me/ 的代码，有条件注释，低于IE7有惊喜。。。

sigone

2011-08-17 19:07:37 +08:00

@loading

十分感谢

Platinum

2011-08-17 19:35:22 +08:00

二楼 phzzy 的已经是正解了，我是发完贴才看到他的回复（几乎同时回的）

你要的效果必须用 JS，我以为你是问相间条纹之类样式，所答非所问

这种应该不叫交错吧……感觉应该叫填充式布局……