underone
V2EX  ›  设计

如何最简单的实现瀑布式的布局?

  •  
  •   underone · Dec 17, 2011 · 5519 views
    This topic created in 5440 days ago, the information mentioned may be changed or developed.
    24 replies  •  1970-01-01 08:00:00 +08:00
    Sivan
    Sivan
    Dec 17, 2011
    2
    最简单的就是纯css,4个竖列往里面填- -
    underone
    underone
    OP
    Dec 17, 2011
    3
    @Sivan 嗯..这倒是...就是高度不控制啊...
    underone
    underone
    OP
    Dec 17, 2011
    4
    @chuck911 这个我依稀记得上次工作中IE6出过奇怪的bug...我再试试
    zhaoyafei
    zhaoyafei
    Dec 17, 2011
    5
    @underone 高度不控制不就正好满足你的要求了吗?
    underone
    underone
    OP
    Dec 17, 2011
    6
    @zhaoyafei 啊?啥...啥意思?
    Sivan
    Sivan
    Dec 17, 2011
    7
    @zhaoyafei underone 的意思是每列的总高度不受控制,最后页底可能会差特别多……
    NemoAlex
    NemoAlex
    Dec 17, 2011
    9
    @Sivan 你说的方法这里是这样实现的 http://wow.taobao.com/
    victor
    victor
    Dec 17, 2011
    10
    我朋友曾經諮詢過橫向滾動的問題,我做了一個demo
    http://dl.dropbox.com/u/244623/linn-example.zip

    是Rails的,js代碼在 app/assets/javascripts/products.js.coffee

    你改稱豎向的就好了。

    裡面有一點種子數據
    rake db:migrate
    rake db:seed
    underone
    underone
    OP
    Dec 17, 2011
    11
    @victor 好滴我去参观一下~~
    underone
    underone
    OP
    Dec 17, 2011
    12
    我还想补充一个问题:无论实现方式,瀑布式布局的最大劣势是什么?
    victor
    victor
    Dec 17, 2011
    13
    @underone 抱歉那個是源碼下載而已。你得自己在本地跑一下demo才行
    underone
    underone
    OP
    Dec 17, 2011
    14
    @victor 恩恩,我叫合作伙伴一起看:)
    NemoAlex
    NemoAlex
    Dec 17, 2011
    15
    @underone 还是技术门槛的问题
    做起来不是什么难的事情,但是要做到效果好并且足够高效,就不是很容易了
    目前几个做得好的网站都没有开源这方面的东西
    jQuery那个拿来需要改很多
    淘宝那个他们自己还没有产品在用
    而且淘宝的JS框架,很少有人为了这个东西去用吧
    淘宝的那篇文章思路很好,真要做的话认真看一下(阅读指引:前面一大半内容都在扯淡可以略过)
    结合自己在用的JS框架,东西还是要自己重新写才好用
    underone
    underone
    OP
    Dec 17, 2011
    16
    @NemoAlex 嗯...先从最简的方式开始尝试起吧...
    Rice
    Rice
    Dec 17, 2011
    17
    就试试4个竖列往里面填,然后控制每个列里的块一样多,这样就页底不会差太多
    heckthisplace
    heckthisplace
    Dec 18, 2011
    18
    一直用一楼提供的插件.
    underone
    underone
    OP
    Dec 18, 2011
    19
    @fim8 没有在ie里遇到过间距不正常的问题吗?
    underone
    underone
    OP
    Dec 18, 2011
    20
    @Rice 问题是我这里可能用到的地方偏偏有的用户爱上传贼长的图...
    Rice
    Rice
    Dec 18, 2011
    21
    @underone -_- 那肯定简单不了了,用别人写好的改下吧……
    heckthisplace
    heckthisplace
    Dec 18, 2011
    22
    @underone 你把宽度定好试试. 有一个地方要设定宽度.
    Rice
    Rice
    Dec 18, 2011
    23
    @underone 限制图片高度?鼠标划过时才拉长图片?
    underone
    underone
    OP
    Dec 18, 2011
    24
    @Rice 那样整体会很难看啊...
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   3807 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 01:38 · PVG 09:38 · LAX 17:38 · JFK 20:38
    ♥ Do have faith in what you're doing.