V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
onlytiancai

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

  •  
  •   onlytiancai · Feb 13, 2012 via Android · 13550 views
    This topic created in 5198 days ago, the information mentioned may be changed or developed.
    http://datui.sinaapp.com
    界面做的比较烂,不会设计,
    还有就是手机上浏览我想让他显示两列,怎么弄呀?
    用那个媒体查询搞了半天手机上还是960宽
    57 replies    1970-01-01 08:00:00 +08:00
    guotie
        1
    guotie  
       Feb 13, 2012
    不错!
    loading
        2
    loading  
       Feb 13, 2012
    自己再写css,只留图片,噢,我邪恶了。。。

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

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

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

    按道理应该是两列

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

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