等宽瀑布流布局的开发实践

Pinterest 当时的成功,在国内掀起了一股瀑布流的潮流,但很多国内的网站仅仅只学会了使用瀑布流的布局方式,却没有看到 Pinterest 成功背后的模式。页面的布局方式仅仅是一个壳,瀑布流的布局方式也最多算是一个漂亮的壳。如果没有实质性的内容,光有壳就只能让用户图个新鲜。就好比帅哥美女仅仅是外表漂亮,而没有内涵和气质一样。

瀑布流展现的内容通常是扁平化、琐碎的东西,首先吸引人的应该是图片,如果瀑布流中文字过多,只会给人很杂乱的感觉,所以瀑布流更适合单纯的图片浏览。

最近公司的项目–360图片的美女秀场,就用到了瀑布流的布局方式,这种纯粹的看美女图片的页面用瀑布流还是挺合适的。

以前并未开发过瀑布流布局的网站,第一个想到的实现方式就是多列浮动,从表面上看这种方式要简单。

传统的定位布局方式

但是,目前主流的瀑布流布局都是采用定位的方式,对每个单元格计算定位值,如下图:

定位方式实现的瀑布流布局
阅读全文 »