8. 瀑布流布局知识总结
mix-blend-mode — CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
CSS Grid和Flexbox让我们可以更简便，更容易和更快的实现各式各样的响应布局，并且让我们快捷方便的在布局中实现横向剧中和竖向剧中。但是回想一下以前是颇为困难的。
虽然这些新出的布局方式可以让我们解决很多以前的布局难题，但是像瀑布流布局这种，就无法用它们简单来实现了。因为瀑布流一般来说都是宽度一致，但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。
其实最好实现瀑布流布局的办法就是用CSS的列属性套件，这套属性大多数都是用于排版杂志中的文本列。但是用于布局瀑布流也是特别实用哦。因为以前需要实现瀑布流，就必须有JavaScript的辅助来计算图片高度然后决定每张图片的定位和位置，所以现在有了列属性就可以使用纯CSS实现了。
实现原理：
实现这个布局，首选我们需要把所有的内容先包裹在一个div元素里面，然后给这个元素column-width和column-gap属性。
然后，为了防止任何元素被分割到两个列之间，将column-break-inside: avoid添加到各个元素中。
神奇的效果就完美实现了，零JavaScript。
我们来看看代码：
<div class="columns">
<figure>
<img src="https://source.unsplash.com/random?city" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?night" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?developer" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?building" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?water" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?coding" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?stars" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?forest" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?girls" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?working" alt="" />
</figure>
</div>
.columns {
column-width: 320px;
column-gap: 15px;
width: 90%;
max-width: 1100px;
margin: 50px auto;
}
.columns figure {
display: inline-block;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
column-break-inside: avoid;
border-radius: 8px;
}
.columns figure img {
width: 100%;
height: auto;
margin-bottom: 15px;
border-radius: 8px;
}
总结知识总结
column-width — CSS属性建议一个最佳列宽。 列宽是在添加另一列之前列将成为最大宽度。 column-width — 该 CSS 属性用来设置元素列之间的间隔 (gutter) 大小。 column-break-inside — 设置或检索对象内部是否断。
我希望这8个前端小技巧和特效对大家有帮助，或多或少有吸收一点新的前端知识。这篇文章提到的内容，其实很多都是值得深挖和学习的。有一些例子我做的比较简单，但是其实是有无限的可能性。喜欢前端的童鞋们，让我们继续在前端领域中一起深挖，让我们的热爱无限的燃烧起来吧！
在最后我想给大家讲一下我对前端的热爱和态度。
回想前端这几年，发展真的是突飞猛进，从前端排版，HTML5 CSS3做H5页面，到前端组件化，各种UI框架满天飞。
一开始我随着热潮用起了UI框架，起初觉得特别方便，来一个新的项目就直接上一个UI框架，研发速度也非常快。但是久而久之就觉得前端开发变成了处理数据，对接接口，实现交互。
某天在阅览国外的一些前端设计和框架的时候，我突然发现国内多数的前端开发者都不再怎么使用CSS3做出一些很好玩的布局和特效了。现在市面上的系统和页面都是千篇一律，普遍都是用一些知名的UI框架搭建系统和APP，基本自己动手去排版已经少之又少。前端已不再是以前的前端，缺少了灵魂。
但是我们回想一下，我们刚刚开始学习前端的时候，让我们最有成就感，觉得前端特别有意思的那种感觉。就是那种让我们觉得神乎奇迹，不可思议的布局，特效和交互。那种感觉自己成功实现了很优美，很炫酷的页面和特效的感觉，让我们越做越来劲，越做越是兴奋。
但是在某些公司，研发部都是要求快速开发，UI设计部门也是受到时间的控制和限制，所以逐步走进了UI框架的限制之中。都是围绕这一些UI框架来设计和开发系统和应用。
作为一名热爱前端的开发者，我还是坚持在绝大多数的项目中，自己排版和实现页面交互特效。然后使用UI框架作为辅助，主要是用来减轻一些小组件和常用组建的快速实现。（可以说我是比较追求完美和外貌协会的程序员 ）
作者：三钻
链接：https://juejin.im/post/5e8fc7826fb9a03c677e68d9
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
