且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

瀑布流

更新时间:2022-09-02 14:56:13

引用:http://baike.baidu.com/view/7151782.htm

瀑布流是什么

  瀑布流,又称瀑布流式布局。是目前比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着
  瀑布流

瀑布流效果

页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。
 

编辑本段瀑布流的应用

  瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳。[1]国内类Pinterest网站也如雨后春笋般出现,目前已知网站超40家,类Pinterest网站有三种,一是电商导购,如蘑菇街美丽说,依托于淘宝平台;二是兴趣图谱分享,如知美花瓣等;三是在细分垂直领域,如针对吃货的零食控、针对家居行业的他部落、综合性中文网络社交平台的海内论坛[2]等。
 

编辑本段瀑布流类型的网站特点

  1、琳琅满目:整版以图片为主,大小不一的图片按照一定的规律排列。
 
  2、唯美:图片的风格以唯美的图片为主。
 
  3、操作简单:在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。
 

编辑本段瀑布流的实现方式

  1、传统多列浮动。代表网站 蘑菇街和哇哦
 
  2、用CSS3实现
 
  3、绝对定位。代表网站Pinterest
 

编辑本段瀑布流布局的优点

  1、布局简单,没有特别的难点;
 
  2、不必明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度。
 

编辑本段瀑布流布局的缺点

  1、列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列;
 
  2、滚动加载更多数据时,还要指定插入到第几列中,不够方便。
 
  3、只有高级浏览器中才能使用;
 
  4、数据块排列是从上到下排列到一定高度后,再把剩余元素依次添加到下一列,这个本质上就不一样了;
 
  鉴于这些主要缺点,注定了该方法只能局限于高端浏览器,而且,更适合于文字多栏排列。
 

编辑本段常见的瀑布流网站

  鼻祖:Pinterest[3]
 
  通用类:花瓣网,我喜欢,读图知天下
 
  美女图片:图丽网
 
  时尚购物类:蘑菇街,美丽说,人人逛街
 
  品牌推广类:凡客达人
 
  社交论坛:海内论坛
 
  家居o2o类:新巢网
 
  微博社交类: 都爱看
 
 
 
参考资料
扩展阅读:
开放分类:
前端开发瀑布流