V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

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

By onlytiancai · 2012-02-13 08:34:24用 Android 发布 · 5431 次点击
这是一个创建于 801 天前的主题,其中的信息可能已经有所发展或是发生改变。
http://datui.sinaapp.com
界面做的比较烂,不会设计,
还有就是手机上浏览我想让他显示两列,怎么弄呀?
用那个媒体查询搞了半天手机上还是960宽
57 回复  |  直到 2012-03-23 16:08:48
    1
guotie   2012-02-13 09:30:26
不错!
    2
loading   2012-02-13 09:51:26
自己再写css,只留图片,噢,我邪恶了。。。

不错
    3
manhere   2012-02-13 09:57:02
直接取新浪微博的内容,没有问题吗?
    4
iloveayu   2012-02-13 10:21:05
啊哈~这二级域找得好直白~
    5
shine_lee   2012-02-13 10:47:43
datui...中箭了,我是来看美腿的
    6
kimcool   2012-02-13 10:49:03
擦。。能分享或者出售这个不。想用这种程序做个宠物图片收集站。
    7
jinjuo   2012-02-13 10:49:56
太……霸气(找不到别的词了)
    8
miaoever   2012-02-13 10:50:35
域名霸气,哈哈。
    9
sigone   2012-02-13 10:57:16
火狐浏览器有问题
    10
chairo   2012-02-13 11:05:19
霸气外露啊
    11
eric_zyh   2012-02-13 11:19:24
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
datui...碉堡了啊...
    13
onlytiancai   2012-02-13 11:26:09
@eric_zyh 好,谢谢高手相助,我回家试试。
    14
sigone   2012-02-13 11:33:01
能否分享一下源代码
    15
flied   2012-02-13 11:36:13
我想知道图片是怎么找的?搜索新浪微博图片关键字?
    16
onlytiancai   2012-02-13 11:37:03
@sigone 可以分享源码,不过现在前端,后端写的都比较草,发出来怕丢人。
    17
onlytiancai   2012-02-13 11:40:21
@flied 新浪有话题的jsonp接口,
最新美腿:搜索带“美腿”,原创,有图片,不带链接(有链接的大多都是广告)的微博
最受欢迎美腿:用户点了分享美腿,或我喜欢这个美腿的链接后就会跑到这里。
我喜欢的美腿:用户登录后,点了我喜欢某个美腿,以后在“我喜欢的美腿”里就可以看到已经喜欢过的美腿了。

纯玩的,没加太多乱七八糟的功能。
    18
Matata   2012-02-13 11:47:10
看了半天
    19
lukefan   2012-02-13 12:05:29
在chrome里面排列得有些凌乱啊?是不是在调程序啊?
    20
lukefan   2012-02-13 12:09:29
多等了一会儿,现在好了。
一直对瀑布流这种形式不是很喜欢。这种阅读方式,太无须了。
    21
Sivan   2012-02-13 12:15:09
我进去之后就没心思想技术的问题了。
    22
realfex   2012-02-13 12:16:17
顶部配色挺有团购网站的赶脚。。。
    23
54xiaobin   2012-02-13 12:37:50
域名真霸气
    24
wdx   2012-02-13 12:52:32
果断抱大腿
    25
jwu   2012-02-13 12:53:33
LOL
期待lz公布源码参考参考哈~
    26
sigone   2012-02-13 12:53:55
@onlytiancai 希望分享
    27
mr_pppoe   2012-02-13 13:01:40
也看了半天
    28
sun019   2012-02-13 13:02:59
嗯 不错哦
    29
babyisland   2012-02-13 13:11:18
有人会有【做个“晒胸肌”来取悦广大女性用户】的想法吗?
    30
avatasia   2012-02-13 16:52:29
    31
hanbaoo   2012-02-13 17:23:34
@babyisland 女生看个一两次还行,看多了容易恶心吧
    32
onlytiancai   2012-02-13 21:24:12
@eric_zyh 你好,我改好了,图片没显示出来的时候只显示很小的一片区域。
为啥用height:20px呀。
我的例子在http://www.shailiwu.com
    33
eric_zyh   2012-02-13 21:41:20
如果height太大,网页没加载完之前能很明显的看到上下2个瀑布块之间的间隔。加载完后,masonry计算瀑布块位置会有个很明显的闪动效果,体验不是很好。

不过你的网页实在是加载太慢了,所以一直卡在那。 可以考虑加一个loadding
    34
onlytiancai   2012-02-13 22:09:26
@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
masonry计算列数量的方法是:_getColumns。 你可以拿源码调试一下。

按道理应该是两列

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

490 0 240
    36
onlytiancai   2012-03-07 09:51:55
https://github.com/onlytiancai/datui 开源了,我把代码放到github上了,希望大家能一起改进前端界面和后端代码,呵呵。
    37
NO_29   2012-03-07 10:15:38
看了半天,手滑收藏了=。=
    38
udonmai   2012-03-07 10:42:43
好福利+1
    39
zhuzhuor   2012-03-07 10:44:10
牛逼!!!
    40
ksky   2012-03-07 10:46:10
收了。
    41
peJoJo   2012-03-07 10:54:41
恩。收藏了。。。很有想法
    42
wptree   2012-03-07 11:08:15
随便找个点子做成瀑布流,就能赚足眼球。
    43
yishanhe   2012-03-07 11:21:13
https://80yy.sinaapp.com/ 这个也是楼主的作品么?好有感觉啊
    44
vincentqi   2012-03-07 11:33:56
收藏了,就喜欢这种纯粹的内容
    45
hileon   2012-03-07 11:52:00
nb
    46
sun019   2012-03-07 12:48:40
@onlytiancai 谢谢分享了 不错
    47
qiuai   2012-03-07 14:10:01
=.=刚才突然想起来...我手上还有个 youxiongqi.com xiongqi.org...胸器.....凶器....
    48
ming1016   2012-03-13 16:11:23
我也做了个晒美腿的,还有制服,翘臀,内涵,福利,女优等关键字的。
下面是赛美腿的标签,都是实时取的,切换关键字刷新会不断获得最新内容。
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 现在流行瀑布流嘛
    49
summer222522   2012-03-13 16:58:40
@iloveayu 同心声。 另求lz的datui
    50
crysng   2012-03-13 17:31:15
呵呵,很sexy
    51
qichunren   2012-03-13 17:37:38
楼主用的是微博api v1的API,什么时候就会要取消了。我看文档上目前的v2 api,发现已经没有了根据话题搜索微博内容的api了,新浪越搞越封闭了。
    52
humiaozuzu   2012-03-13 18:16:58
域名为啥叫大腿。。。 美腿多好
    53
sunny222   2012-03-13 20:00:11
@humiaozuzu 好想法~美腿好听~哈哈
    54
onlytiancai   2012-03-16 10:07:01
@qichunren 是呀,有可能,有时间向新浪发邮件让他们V2也支持下这个API吧。
    55
joby   2012-03-19 13:23:12
碉堡了!!!娃哈哈!!!
    56
hitbastank   2012-03-22 14:16:15
赞,我就是喜欢腿
    57
ailogx   2012-03-22 14:28:08
灰常养眼 期待放出源码
    58
sobigfish   2012-03-22 16:08:48
@ailogx 呃。请看36L 或者搜lz的回帖 github
DigitalOcean
Linode
关于   ·   FAQ   ·   我们的愿景   ·   IP 查询   ·   工作空间   ·   广告投放   ·   博客   ·   上网首页   ·   38 人在线   最高记录 631   ·  
创意工作者们的社区
Lovingly made by OLIVIDA
VERSION: 3.2.2 · 161ms · UTC 21:16 · PVG 05:16 · LAX 14:16 · JFK 17:16
♥ Do have faith in what you're doing.