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

[sigone]

li 的宽度是固定的

[GossipGirl]

都2011年了

[phzzy]

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

[Platinum]

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]

@Platinum

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

[sigone]

@phzzy ie 似乎没有效果

[sigone]

@Platinum

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

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

[unstop]

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

[blueforyou]

@phzzy貌似实现不了

[marvyn]

jQuery masonary 插件实现

[sigone]

@unstop ie无效

[NemoAlex]

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

[bigdude]

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

[loading]

css选择器可以做到，而ie是残疾的，再而是js是万能的，用js替代css选择器，让js给每个li加入class，如li-1,li-2,li-3...etc.
回去有空我写过demo吧，现在坐车

[sigone]

@bigdude

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

[sigone]

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

[leojoy710]

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

[sigone]

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

[leojoy710]

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

[sigone]

@leojoy710

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

你是那个演示地址

[loading]

在电脑上看过了，也明白了 @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==