雨夜带刀's Blog

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

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

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

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

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

传统的定位布局方式

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

定位方式实现的瀑布流布局
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。