HTML之瀑布流布局

什么是瀑布流布局

瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

瀑布流布局的特点

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

瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳，同时给人以不拘一格的感觉，切中年轻一族的个性化心理。

瀑布流布局如何实现

1. ·获取等宽的图片，计算图片与页面的宽的比列。获取在页面展示的列数
   例如body的宽度为900px。而每张图片的宽度为200px。所以只能放下四列。
2. 创建一个数组，长度为列数，里面的值为已布置元素的总高度（最开始为0）
   例：arr = [0, 0, 0 ,0] ----表明四列 每列高度为0，当我们布置了如上的图片后，数组的值也会发生改变：