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

瀑布

布局

简单

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

1

chuck911

2011-12-17 21:19:56 +08:00

jQuery Masonry
demo: http://masonry.desandro.com/demos/basic-single-column.html

2

Sivan

2011-12-17 21:24:45 +08:00

最简单的就是纯css，4个竖列往里面填- -

3

underone

OP

2011-12-17 21:29:37 +08:00

@Sivan 嗯..这倒是...就是高度不控制啊...

4

underone

OP

2011-12-17 21:30:12 +08:00

@chuck911 这个我依稀记得上次工作中IE6出过奇怪的bug...我再试试

5

zhaoyafei

2011-12-17 21:32:09 +08:00

@underone 高度不控制不就正好满足你的要求了吗？

6

underone

OP

2011-12-17 21:37:03 +08:00

@zhaoyafei 啊？啥...啥意思？

7

Sivan

2011-12-17 21:58:31 +08:00

@zhaoyafei underone 的意思是每列的总高度不受控制，最后页底可能会差特别多……

8

26z

2011-12-17 22:16:34 +08:00

http://ued.taobao.com/blog/2011/09/14/waterfall/

9

NemoAlex

2011-12-17 22:22:16 +08:00

@Sivan 你说的方法这里是这样实现的 http://wow.taobao.com/

10

victor

2011-12-17 22:38:06 +08:00

我朋友曾經諮詢過橫向滾動的問題，我做了一個demo
http://dl.dropbox.com/u/244623/linn-example.zip

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

你改稱豎向的就好了。

裡面有一點種子數據
rake db:migrate
rake db:seed

11

underone

OP

2011-12-17 22:42:23 +08:00

@victor 好滴我去参观一下~~

12

underone

OP

2011-12-17 22:43:31 +08:00

我还想补充一个问题：无论实现方式，瀑布式布局的最大劣势是什么？

13

victor

2011-12-17 22:56:56 +08:00

@underone 抱歉那個是源碼下載而已。你得自己在本地跑一下demo才行

14

underone

OP

2011-12-17 23:04:14 +08:00

@victor 恩恩，我叫合作伙伴一起看:)

15

NemoAlex

2011-12-17 23:05:25 +08:00

@underone 还是技术门槛的问题
做起来不是什么难的事情，但是要做到效果好并且足够高效，就不是很容易了
目前几个做得好的网站都没有开源这方面的东西
jQuery那个拿来需要改很多
淘宝那个他们自己还没有产品在用
而且淘宝的JS框架，很少有人为了这个东西去用吧
淘宝的那篇文章思路很好，真要做的话认真看一下（阅读指引：前面一大半内容都在扯淡可以略过）
结合自己在用的JS框架，东西还是要自己重新写才好用

16

underone

OP

2011-12-17 23:14:56 +08:00

@NemoAlex 嗯...先从最简的方式开始尝试起吧...

17

Rice

2011-12-17 23:48:32 +08:00

就试试4个竖列往里面填，然后控制每个列里的块一样多，这样就页底不会差太多

18

fim8

2011-12-18 00:09:00 +08:00

一直用一楼提供的插件.

19

underone

OP

2011-12-18 00:37:06 +08:00

@fim8 没有在ie里遇到过间距不正常的问题吗？

20

underone

OP

2011-12-18 00:37:45 +08:00

@Rice 问题是我这里可能用到的地方偏偏有的用户爱上传贼长的图...

21

Rice

2011-12-18 02:41:56 +08:00

@underone -_- 那肯定简单不了了，用别人写好的改下吧……

22

fim8

2011-12-18 15:24:20 +08:00

@underone 你把宽度定好试试. 有一个地方要设定宽度.

23

Rice

2011-12-18 15:30:51 +08:00

@underone 限制图片高度？鼠标划过时才拉长图片？

24

underone

OP

2011-12-18 16:36:27 +08:00

@Rice 那样整体会很难看啊...