纯CSS实现瀑布流布局

前言

各位前端的同仁们，它终于来了，使用纯Css实现瀑布流布局！
我这里说的瀑布流布局是指等宽的图片进行排列。
过去我们实现瀑布流布局需要使用很多的逻辑代码去控制它的位置，非常麻烦，现在不需要了，我们只需要在页面上使用一个容器，把所有的图片内容包起来

效果是图片行依次排列

然后给图片容器使用grid布局，一行设置显示四列图片，给图片之间添加间距

之前我们只能做到这样，现在我们只需要添加一个属性，一行代码就可以实现瀑布流布局
grid-template-rows: masonry;
masonry 属性值是指砖块布局
这样就实现了瀑布流布局，而且没有使用js逻辑代码，而且运行效率比以前的使用Js逻辑代码实现布局的效率高很多

But 现在这个属性的兼容性还不是很好，因为这是一个新出来的属性值，目前只有火狐浏览器支持，而且需要到火狐浏览器中设置grid-template-masonry-value.enabled为true ，默认是不支持的；

这个属性想要大规模使用到项目开发中去可能还需要些时间，不过相信不久的将来这个属性也会普及；