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

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

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

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

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

    不过你的网页实在是加载太慢了,所以一直卡在那。 可以考虑加一个loadding
    onlytiancai
        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,在手机上效果也不好。
    eric_zyh
        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
    onlytiancai
        36
    onlytiancai  
    OP
       2012-03-07 09:51:55 +08:00
    https://github.com/onlytiancai/datui 开源了,我把代码放到github上了,希望大家能一起改进前端界面和后端代码,呵呵。
    NO_29
        37
    NO_29  
       2012-03-07 10:15:38 +08:00
    看了半天,手滑收藏了=。=
    udonmai
        38
    udonmai  
       2012-03-07 10:42:43 +08:00
    好福利+1
    zhuzhuor
        39
    zhuzhuor  
       2012-03-07 10:44:10 +08:00
    牛逼!!!
    ksky
        40
    ksky  
       2012-03-07 10:46:10 +08:00
    收了。
    peJoJo
        41
    peJoJo  
       2012-03-07 10:54:41 +08:00
    恩。收藏了。。。很有想法
    wptree
        42
    wptree  
       2012-03-07 11:08:15 +08:00
    随便找个点子做成瀑布流,就能赚足眼球。
    yishanhe
        43
    yishanhe  
       2012-03-07 11:21:13 +08:00
    https://80yy.sinaapp.com/ 这个也是楼主的作品么?好有感觉啊
    vincentqi
        44
    vincentqi  
       2012-03-07 11:33:56 +08:00
    收藏了,就喜欢这种纯粹的内容
    hileon
        45
    hileon  
       2012-03-07 11:52:00 +08:00
    nb
    sun019
        46
    sun019  
       2012-03-07 12:48:40 +08:00
    @onlytiancai 谢谢分享了 不错
    qiuai
        47
    qiuai  
       2012-03-07 14:10:01 +08:00
    =.=刚才突然想起来...我手上还有个 youxiongqi.com xiongqi.org...胸器.....凶器....
    ming1016
        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 现在流行瀑布流嘛
    summer222522
        49
    summer222522  
       2012-03-13 16:58:40 +08:00
    @iloveayu 同心声。 另求lz的datui
    crysng
        50
    crysng  
       2012-03-13 17:31:15 +08:00
    呵呵,很sexy
    qichunren
        51
    qichunren  
       2012-03-13 17:37:38 +08:00
    楼主用的是微博api v1的API,什么时候就会要取消了。我看文档上目前的v2 api,发现已经没有了根据话题搜索微博内容的api了,新浪越搞越封闭了。
    humiaozuzu
        52
    humiaozuzu  
       2012-03-13 18:16:58 +08:00
    域名为啥叫大腿。。。 美腿多好
    sunny222
        53
    sunny222  
       2012-03-13 20:00:11 +08:00
    @humiaozuzu 好想法~美腿好听~哈哈
    onlytiancai
        54
    onlytiancai  
    OP
       2012-03-16 10:07:01 +08:00
    @qichunren 是呀,有可能,有时间向新浪发邮件让他们V2也支持下这个API吧。
    joby
        55
    joby  
       2012-03-19 13:23:12 +08:00
    碉堡了!!!娃哈哈!!!
    hitbastank
        56
    hitbastank  
       2012-03-22 14:16:15 +08:00
    赞,我就是喜欢腿
    ailogx
        57
    ailogx  
       2012-03-22 14:28:08 +08:00
    灰常养眼 期待放出源码
    sobigfish
        58
    sobigfish  
       2012-03-22 16:08:48 +08:00
    @ailogx 呃。请看36L 或者搜lz的回帖 github
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5307 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 114ms · UTC 08:37 · PVG 16:37 · LAX 00:37 · JFK 03:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.