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

[onlytiancai]

http://datui.sinaapp.com
界面做的比较烂，不会设计，
还有就是手机上浏览我想让他显示两列，怎么弄呀？
用那个媒体查询搞了半天手机上还是960宽

[Sivan]

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

[realfex]

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

[54xiaobin]

域名真霸气

[wdx]

果断抱大腿

[jwu]

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

[sigone]

@onlytiancai 希望分享

[mr_pppoe]

也看了半天

[sun019]

嗯 不错哦

[babyisland]

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

[avatasia]

@babyisland 你

[hanbaoo]

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

[onlytiancai]

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

[eric_zyh]

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

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

[onlytiancai]

@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]

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

按道理应该是两列

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

490 0 240

[onlytiancai]

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

[NO_29]

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

[udonmai]

好福利+1

[zhuzhuor]

牛逼！！！

[ksky]

收了。