V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
sigone
V2EX  ›  CSS

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

  •  
  •   sigone · 2011-08-17 14:50:55 +08:00 · 7642 次点击
    这是一个创建于 4851 天前的主题,其中的信息可能已经有所发展或是发生改变。
    li 的宽度是固定的
    23 条回复    1970-01-01 08:00:00 +08:00
    GossipGirl
        1
    GossipGirl  
       2011-08-17 15:03:34 +08:00
    都2011年了
    phzzy
        2
    phzzy  
       2011-08-17 15:35:54 +08:00
    Platinum
        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;
    }
    sigone
        4
    sigone  
    OP
       2011-08-17 15:43:50 +08:00
    @Platinum

    如这样 http://www.swinton.me/
    关键是能否适用于所有浏览器
    sigone
        5
    sigone  
    OP
       2011-08-17 15:44:18 +08:00
    @phzzy ie 似乎没有效果
    sigone
        6
    sigone  
    OP
       2011-08-17 15:46:29 +08:00
    @Platinum

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

    能不能只用一个 <ul></ul> 来实现
    unstop
        7
    unstop  
       2011-08-17 16:04:43 +08:00
    http://masonry.desandro.com 一个JQ插件,可以实现这个排版效果。我个人认为,只用CSS是不行的。
    blueforyou
        8
    blueforyou  
       2011-08-17 16:09:51 +08:00
    @phzzy貌似实现不了
    marvyn
        9
    marvyn  
       2011-08-17 16:17:35 +08:00
    jQuery masonary 插件实现
    sigone
        10
    sigone  
    OP
       2011-08-17 16:26:18 +08:00
    @unstop ie无效
    NemoAlex
        11
    NemoAlex  
       2011-08-17 16:37:02 +08:00
    要我做的话,不用那么麻烦
    一个ul固定宽度,4个li固定宽度,浮动,分成4列,里面填高度不等的div好了
    你给的网站是每个li绝对定位的,top和left值写上去
    这个可以后端算好写出来,也可以前端用JS写
    方法有很多,不是什么难事
    bigdude
        12
    bigdude  
       2011-08-17 16:39:55 +08:00
    楼主,你都给出实例页面了,也不分析分析人家怎么实现的?
    sodao用的是等宽四栏,每个元素纵向排列就实现了你说的“交错布局”
    不用js,也不用高级css选择器,这只是一个很简单的布局问题
    loading
        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吧,现在坐车
    sigone
        14
    sigone  
    OP
       2011-08-17 17:46:26 +08:00
    @bigdude

    我指的是他的排布方式, 而不是他的代码, 我的想法是只在前台通过简单的代码就能让 li 如此排列, 而不是通过程序再加一个 父div 或者 li
    sigone
        15
    sigone  
    OP
       2011-08-17 17:46:56 +08:00
    @loading
    希望能分享一下解决方案 ^_^
    leojoy710
        16
    leojoy710  
       2011-08-17 18:19:40 +08:00
    masonry是兼容所有浏览器的啊...
    sigone
        17
    sigone  
    OP
       2011-08-17 18:23:45 +08:00
    @leojoy710 为什么我用 i8 看他的演示没有效果呢?
    leojoy710
        18
    leojoy710  
       2011-08-17 18:31:15 +08:00
    @sigone ie6看都是正常的...可能是网络问题或者演示问题吧...他的首页就是用了masonry的...看首页就行...
    sigone
        19
    sigone  
    OP
       2011-08-17 19:00:45 +08:00
    @leojoy710

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

    你是那个演示地址
    loading
        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==
    loading
        21
    loading  
       2011-08-17 19:04:43 +08:00
    @sigone 你可以看下http://www.swinton.me/ 的代码,有条件注释,低于IE7有惊喜。。。
    sigone
        22
    sigone  
    OP
       2011-08-17 19:07:37 +08:00
    @loading

    十分感谢
    Platinum
        23
    Platinum  
       2011-08-17 19:35:22 +08:00
    二楼 phzzy 的已经是正解了,我是发完贴才看到他的回复(几乎同时回的)

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

    这种应该不叫交错吧……感觉应该叫填充式布局……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3518 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:58 · PVG 18:58 · LAX 02:58 · JFK 05:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.