做了个瀑布流，晒美腿，你懂的

美腿

手机

搞了半天

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

1

guotie

2012-02-13 09:30:26 +08:00

不错！

2

loading

2012-02-13 09:51:26 +08:00

自己再写css，只留图片，噢，我邪恶了。。。

不错

3

manhere

2012-02-13 09:57:02 +08:00

直接取新浪微博的内容，没有问题吗？

4

iloveayu

2012-02-13 10:21:05 +08:00

啊哈~这二级域找得好直白~

5

shine_lee

2012-02-13 10:47:43 +08:00

datui...中箭了，我是来看美腿的

6

kimcool

2012-02-13 10:49:03 +08:00

擦。。能分享或者出售这个不。想用这种程序做个宠物图片收集站。

7

jinjuo

2012-02-13 10:49:56 +08:00

太……霸气（找不到别的词了）

8

miaoever

2012-02-13 10:50:35 +08:00

域名霸气，哈哈。

9

sigone

2012-02-13 10:57:16 +08:00

火狐浏览器有问题

10

chairo

2012-02-13 11:05:19 +08:00

霸气外露啊

11

eric_zyh

2012-02-13 11:19:24 +08:00

masonry的列数=“容器宽度”/“列宽”。

手机浏览器情况下只要把容器宽度减半即可，就是你的class：.container-fluid .content
width: 960px -> width: 480px;

另外你的瀑布渲染的时候会闪烁，昨天有个v2exer有个和你类似的问题。给items加个样式"height:20px;overflow:hidden"即可，masonry会在瀑布块渲染完毕之后，自动设置高度。

这是我昨天分析masonry源码的文章，你可以看看。http://wuzhi.me/?p=239

12

Ellison

2012-02-13 11:21:16 +08:00

datui...碉堡了啊...

13

onlytiancai

OP

2012-02-13 11:26:09 +08:00

@eric_zyh 好，谢谢高手相助，我回家试试。

14

sigone

2012-02-13 11:33:01 +08:00

能否分享一下源代码

15

flied

2012-02-13 11:36:13 +08:00

我想知道图片是怎么找的？搜索新浪微博图片关键字？

16

onlytiancai

OP

2012-02-13 11:37:03 +08:00

@sigone 可以分享源码，不过现在前端，后端写的都比较草，发出来怕丢人。

17

onlytiancai

OP

2012-02-13 11:40:21 +08:00

@flied 新浪有话题的jsonp接口，
最新美腿：搜索带“美腿”，原创，有图片，不带链接（有链接的大多都是广告）的微博
最受欢迎美腿：用户点了分享美腿，或我喜欢这个美腿的链接后就会跑到这里。
我喜欢的美腿：用户登录后，点了我喜欢某个美腿，以后在“我喜欢的美腿”里就可以看到已经喜欢过的美腿了。

纯玩的，没加太多乱七八糟的功能。

18

Matata

2012-02-13 11:47:10 +08:00

看了半天

19

lukefan

2012-02-13 12:05:29 +08:00

在chrome里面排列得有些凌乱啊？是不是在调程序啊？

20

lukefan

2012-02-13 12:09:29 +08:00

多等了一会儿，现在好了。
一直对瀑布流这种形式不是很喜欢。这种阅读方式，太无须了。

21

Sivan

2012-02-13 12:15:09 +08:00

我进去之后就没心思想技术的问题了。

22

realfex

2012-02-13 12:16:17 +08:00

顶部配色挺有团购网站的赶脚。。。

23

54xiaobin

2012-02-13 12:37:50 +08:00

域名真霸气

24

wdx

2012-02-13 12:52:32 +08:00

果断抱大腿

25

jwu

2012-02-13 12:53:33 +08:00

LOL
期待lz公布源码参考参考哈～

26

sigone

2012-02-13 12:53:55 +08:00

@onlytiancai 希望分享

27

mr_pppoe

2012-02-13 13:01:40 +08:00

也看了半天

28

sun019

2012-02-13 13:02:59 +08:00

嗯不错哦

29

babyisland

2012-02-13 13:11:18 +08:00

有人会有【做个“晒胸肌”来取悦广大女性用户】的想法吗？

30

avatasia

2012-02-13 16:52:29 +08:00

@babyisland 你

31

hanbaoo

2012-02-13 17:23:34 +08:00

@babyisland 女生看个一两次还行，看多了容易恶心吧

32

onlytiancai

OP

2012-02-13 21:24:12 +08:00

@eric_zyh 你好，我改好了，图片没显示出来的时候只显示很小的一片区域。
为啥用height:20px呀。
我的例子在http://www.shailiwu.com

33

eric_zyh

2012-02-13 21:41:20 +08:00

如果height太大，网页没加载完之前能很明显的看到上下2个瀑布块之间的间隔。加载完后，masonry计算瀑布块位置会有个很明显的闪动效果，体验不是很好。

不过你的网页实在是加载太慢了，所以一直卡在那。可以考虑加一个loadding

34

onlytiancai

OP

2012-02-13 22:09:26 +08:00

@eric_zyh 恩，明白了，谢谢。
图片都是新浪的，不应该太慢呀。

手机上如何让它只显示两列呢？

<meta name="viewport" content="width=device-width, initial-scale=1">

@media only screen and (max-width: 768px) {
.topbar-inner{
width:490px;
}
}

@media only screen and (max-width: 768px) {
.container-fluid .content{
width:490px;
}
}

这几个我都设置了，可我的手机上只显示一列了，而且顶部导航还是没缩小。
我用width:100%;max-width:960px，在手机上效果也不好。

35

eric_zyh

2012-02-13 22:23:54 +08:00

masonry计算列数量的方法是：_getColumns。你可以拿源码调试一下。

按道理应该是两列

this.cols = Math.floor( ( containerWidth + this.options.gutterWidth ) / this.columnWidth );

490 0 240

36

onlytiancai

OP

2012-03-07 09:51:55 +08:00

https://github.com/onlytiancai/datui 开源了，我把代码放到github上了，希望大家能一起改进前端界面和后端代码，呵呵。

37

NO_29

2012-03-07 10:15:38 +08:00

看了半天，手滑收藏了=。=

38

udonmai

2012-03-07 10:42:43 +08:00

好福利+1

39

zhuzhuor

2012-03-07 10:44:10 +08:00

牛逼！！！

40

ksky

2012-03-07 10:46:10 +08:00

收了。

41

peJoJo

2012-03-07 10:54:41 +08:00

恩。收藏了。。。很有想法

42

wptree

2012-03-07 11:08:15 +08:00

随便找个点子做成瀑布流，就能赚足眼球。

43

yishanhe

2012-03-07 11:21:13 +08:00

https://80yy.sinaapp.com/ 这个也是楼主的作品么？好有感觉啊

44

vincentqi

2012-03-07 11:33:56 +08:00

收藏了，就喜欢这种纯粹的内容

45

hileon

2012-03-07 11:52:00 +08:00

nb

46

sun019

2012-03-07 12:48:40 +08:00

@onlytiancai 谢谢分享了不错

47

qiuai

2012-03-07 14:10:01 +08:00

=.=刚才突然想起来...我手上还有个 youxiongqi.com xiongqi.org...胸器.....凶器....

48

ming1016

2012-03-13 16:11:23 +08:00

我也做了个晒美腿的，还有制服，翘臀，内涵，福利，女优等关键字的。
下面是赛美腿的标签，都是实时取的，切换关键字刷新会不断获得最新内容。
http://www.starming.com/index.php?action=plugin&v=wave&tpl=fav&ac=finding&words=7

能够收藏，能够绑定自己新浪微博微博用瀑布流方式查看自己微博，可翻页

@manhere 新浪提供了接口直接取是没问题的。
@loading 大家都很邪恶的
@kimcool 这个标签是宠物的
http://www.starming.com/index.php?action=plugin&v=wave&tpl=fav&ac=finding&words=13
@babyisland 你要是对晒胸肌有兴趣，我给你加个
@wptree 现在流行瀑布流嘛