瀑布流是一种网站页面布局，在视觉上表现为参差不齐的多栏布局。当页面的滚动条向下滚动时，该布局将持续加载数据块，并将它们附加到当前尾部。Pinterest是第一个采用这种布局的网站，在中国逐渐流行起来。国内大部分的保鲜站基本都是这种风格。

瀑布特征：

1.眼花缭乱：整个页面主要是图片，不同大小的图片按照一定的规则排列。2.唯美：画面的风格主要是唯美的画面。3.操作简单：浏览网站时，只需要轻轻滑动鼠标滚轮，所有精彩的图片都会呈现给你。

瀑布流布局实现：1。传统的多列浮动。

每一列都有固定的宽度并向左浮动；一列中的数据块为一组，该列中的每个块依次排列；当加载更多数据时，需要将其插入不同的列。优势：

布局简单，应该说没有什么特别的难度；

不需要知道数据块的高度，当数据块中有图片时，不需要指定图片的高度。

缺点：

列数是固定的，不容易扩展。当浏览器窗口大小改变时，只能固定X列。如果要增加一列，很难调整数据块的排列。

当滚动更多的数据时，仍然不方便指定插入哪一列。

示例：

！doctype html lang=' en ' head meta charset=' utf-8 ' title传统多列浮动/title style div { float : left；margin: 5px 5px 5px 5px} p { background: # 90EE90宽度width:160px文本对齐：居中；}/style/head body div p style=' height :230 px；'a1/p p style=' height :100 px；'a2/p/div/p style=' height :100 px；'a3/p p style=' height :300 px；'a4/p/div/p style=' height :250 px；'a5/p p style=' height :200 px；'A6/p /div/body/html效果：

2.CSS3样式定义。

优势：

直接CSS定义最方便；

易于扩展，只需将内容直接添加到容器中。

缺点：

仅在高级浏览器中可用；

另一个缺点是，他的数据块是从上到下排列到一定高度，然后将剩余的元素依次添加到下一列，这本质上是不同的；

鉴于这两个主要缺点，注定这种方法只能局限于高端浏览器，更适合字符的多列排列。

例子

！DOCTYPE HTMl HTMl heartheta http-equiv=' Content-TYPe ' Content=' text/html；Charset=utf-8'titleCSS3瀑布布局/title style . container {-WebKit-column-width :160 px；-moz-柱宽width:160px-o-colum-width :160 px；-web kit-column-gap :1 px；-moz-column-gap :1 px；-o柱-间隙gap:1px} div:not(。container){-web kit-border-radius :5 px；-moz-border-radius :5 px；border-radius :5 px；背景# 90EE90border:#CCC 1px固体；display : inline-block；宽度width:157px位置：相对；margin:2px} .title { line-height :80 px；font-size :18 px；color: # 999文本对齐：居中；font-family: '微软雅黑'；}/style/head dysection Div class=' container ' Div style=' height :80 px ' class=' title '纯CSS3瀑布布局/Div style=' height :260 px '/Div style=' height :65 px '/Div style=' height :120 px '/Div style=' height :145 px '/Div style=' height 3:99

3.绝对定位的最优方案，方便添加数据内容，窗口变化，列数/数据块数会自动调整；

优点：方便添加数据内容，窗口变化，列数/数据块数会自动调整；

缺点：

需要知道数据块的高度，如果包含图片，需要知道图片的高度。

JS动态计算数据块的位置，当窗口频繁缩放时，可能会浪费性能。

思考：

1)数据块排列(排列容器中现有的元素)。算法步骤简述如下：设置(块元素宽度一致)。初始化时，首次计算容器中已有的数据块元素，用户需要给出容器元素： a，从而得到窗口的总宽度；b、列宽(块元素宽度)；c、最小列数；计算显示的列数：将窗口宽度除以一个块框的宽度并向下舍入，设置瀑布显示的中心。存储每列的高度。获取列数后，需要保存每列的当前高度，这样在添加每个数据块时就可以知道起始高度；依次取容器中的所有数据块，先找到当前高度最小的一列，然后根据列序号确定数据块的左、顶值，其中左为序号乘以列宽，顶为该列的当前高度，最后更新该列的当前高度加上该数据块元素的高度。此时，插入一个元素就完成了；插入所有元素后，将容器的高度调整到每列的最大高度，然后依次完成调整。

2)异步数据加载包括两个步骤：(1)绑定滚动事件，确定预加载行的高度值，即滚动到哪个高度后需要加载数据，实际上是该列的最小高度值，通过当前滚动值与最小高度值的比较，可以判断是否触发数据加载；加载数据，将参数传递给函数，并提供加载数据和停止加载(加载时停止)的函数，以实现更方便的控制。

以上就是本文的全部内容，希望对大家的学习有所帮助。