web前端入门到实战：纯CSS瀑布流与JS瀑布流
瀑布流
又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
为什么使用瀑布流
瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！
瀑布流的特点
其实瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。
瀑布流的代码实现
1.纯 css 瀑布流：（ multi-columns 方法 ）
// 这里是第一次接触到 column-columns 这个属性，这是一个可以设置将div元素中的文本分成几列
//默认值是：auto
//写法：
column-count:3;
-moz-column-count:3; /* Firefox /
-webkit-column-count:3; / Safari and Chrome */
/* 注意：IE9及更早 IE 版本浏览器不支持 column-count 属性 */
//这里还会用到另一个属性 column-gap，用来调整边距，实现瀑布流布局
html结构代码如下：
1 2 3 4 5 6 7 8 9 10 11 12
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
CSS代码如下：
.demo-1{ -moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari 和 Chrome */column-count:3;-moz-column-gap: 1em;-webkit-column-gap: 1em;column-gap: 1em;width: 80%;margin:0 auto;}.item { padding: 2em;margin-bottom: 2em;-webkit-column-break-inside: avoid;break-inside: avoid; /*防止断点*/background: #ccc;text-align: center;}
效果图：
这里有个弊端，这并不符合瀑布流的原理，如果使用纯css写瀑布流，则每一块都是从上往下排列，不能做到从左到右排列，并且不会识别哪一块图片放在哪个地方合适，若是再配合动态加载，效果会特别不好，所以只能通过JS来实现瀑布流。
那么这里用图片来分析一下我们想要的瀑布流是什么样的。
瀑布流的位置分析图解
如下方图片。假设一排放5张图片。当第一排排满足够多的等宽图片时，显示的是这样的。那么假如我们要放第6张图片的时候，应该放在什么位置呢？
如果按照我们的正常逻辑来想，应该是放在第一张图片下面，依次水平排列过去（如下图）
但现实并非如此！在瀑布流中，从第2行开始，接下去的每一张图片都会放在上行中高度最低的那一列图片下方。（如下图）
为什么呢？因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。
那么如果再继续放置下去，第七张图片应该放在第三列图片下方，以此类推。
所以每次加载图片时，会需要判断哪一列的图片累计的高度最小，那么下一张图片就放在哪一列，即瀑布流算法去判断图片的确定位置。
JS代码实现
实现思路：
- 设定每一列图片的宽度和间距
- 获取当前窗口的总宽度，从而根据图片宽度去旁段分成几列
- 获取所有图片元素，定义一个空数组来保存高度
- 遍历所有容器，开始判断 当页面加载完成，或页面宽度发生变化时，调用函数。
- 如果当前处于第一行时： 直接设置图片位置【 即 top为间距的大小，left为（当前图片的宽度+间距） * 当前图片的值+间距大小 】，并保存当前元素高度。
- 如果当前不处于第一行时：进行高度对比，通过遍历循环，拿到最小高度和相对应的索引，设置图片位置【 即 top为最小高度值+间距*2，left为 （当前图片的宽度+间距） * 索引 值+间距大小）】，并修改当前索引的高度为当前元素高度。
- 当页面加载完成，或页面宽度发生变化时，调用函数。
代码实现
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
最终效果图：
如果大家对编程，web前端感兴趣，想要了解学习，打算深入了解这个行业的朋友，可以加下我们的前端学习扣qun : 784783012 ，不论你是学生还是想转行的朋友，我都欢迎，不定期分享干货，整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家：学习前端我们是认真的
总结瀑布流布局原理
- 设置图片宽度一致
- 根据浏览器宽度以及每列宽度计算出列表个数，列表默认0
- 当图片加载完成，所有图片依次放置在最小的列数下面
- 父容器高度取列表数组的最大值
引申知识点
- let，const以及var三者的区别
- 滚动加载图片（懒加载原理）
- 反撇号（`）基础知识
- style和style.cssTest 的区别
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！