这个视频带大家用CSS来写一下瀑布流的效果。其实很久以前就用CSS写过瀑布流，但是现在CSS对这种布局又有新的支持，再来学习一下。而且这个视频我会用两种不同的方法带大家来写，都是只用CSS，而且很简单。但是两种方法都会有点缺陷，简单的project是可以用的，复杂的情况目前还是要用到IS比较好。
·元素这里非常简单，就一个大的盒子，里面放了24张图片给大家来做演示。
→样式现在就把这些图片display为block，宽度设置为100%。
→现在的布局就这样24张图片一张一张的排下来，宽度是撑满这个容器的。
→然后就来写一下container，非常简单。
→把这个容器转换成网格布局，然后就来设置一下网格布局列分布的情况。因为所谓的瀑布流布局无非就是控制每一列的列宽是一样的，每个元素的高度就随意。
→这里可以用repeat的让它重复，这个不不留的布局我是打算分成四列的，每一列都是占一份，这样子它们的宽度都一样的。
→有点这个感觉了，但是现在是保持每一个网格元素的高度都是一样的，还不是想要的瀑布流的效果。
→刚才是用属性来控制它的列，也就是列宽，剩下的无非就是再来控制一下它的行高就可以了。
→要是以前想只通过一个CSS属性实现宽度固定之后，所有元素的高度都可以自动去匹配，很难，因为整个布局里面元素很多，而且高度都不一样。
→但是现在可以用一个属性值masonry，翻译过来就是砖石结构，也有点像看墙或者铺砖，装的时候就是横着两块，竖着又一块，就有点这种错落有序的感觉。
瀑布流的布局，也是这种有点错落有序的感觉，没问题。瀑布流的这种大致的布局就已经出来了，就还差一点间隙，那就给它加点gap就可以了。
上述了一件事，ok还不错。这种做法有什么问题？有一个非常大的问题，就是masonry这个属性值是不兼容的，目前仅仅在firefox浏览器里面，而且还要打开对应的设置支持才可以。把这个链接复制一下，来chrome浏览器试一下，这个布局是有问题的，它不兼容。
虽然这个属性目前不兼容，但是既然它推出了，后面的趋势都是向好的方面来发展的，不是说不兼容就没有学习和了解的必要。现在就来改一下，换一种方法，写一个兼容的版本，这个就在chrome里面来测试。先来还原一下，现在又回到一张一张图片这样排下来了。
其实这个方法更加简单，先把容器里面的元素分成四列，用carner cloud来控制，非常简单，就已经把布局分成四列来排列了，而且高度是适应的，剩下的就是调整元素间的间距就可以了。但是这里的间距想要调整好还真的需要有点技巧。
先把它的column-gap手动设置为0，这个等一下还要配合来调整的。先来看一下，这样列之间的间距就没有了。怎么样可以让每个图片之间都有一个很均匀的间隔？第一时间想到的可能就是用外边距，试一下给它加点外边距，20像素试一下。
现在上下的边距有了，为什么左右之间没有边距？而且这里第一个元素的顶部还没有对齐，其实这个边距不是没有，大家可以看一下，看到没有，这个边距模型是出来的，只不过给它叠起来了，也就是说左右的边距是没有起到间隔的作用的。
配合一下列间距是不是可以？给20像素的卡顿感受一下，似乎没什么问题了，但是顶部这张图片还是没有对齐，并且底部出现了横向的滚动条，因为设置了外边距，它的宽度就已经超出来了。
当然如果你们觉得这个版面也可以，也挺好看的，那它就可以了。如果你觉得还需要优化，那还可以继续优化一下。首先这里不可以用外边距了，要不然顶部的图片和第一张没办法对齐，给它用内边距统一收缩一下，而且这个值应该设置成列宽column-gap的一半，因为列宽设置成20，它就是20了。
但是内边距相邻之间的两个元素是会叠加的，有一个两倍的关系，可以来看一下，可以看到用了padding之后顶部的图片就已经对齐了，但是这个间距很明显上下是比它列宽要宽的，刚好是两倍。再来调整一下，把它改成10，现在的感觉就好很多了。
但是还有一个问题，就是底部还有横向的滚动条，这是因为左右的padding来给它撑开的，那就非常简单了，只要把它左右的padding来设置为0，保留上下的就可以了，这个效果就已经非常不错了。
其实代码是非常非常少的，但是很多人都不一定写的出来，而且这个方法是兼容的，那它有什么问题？刚才说了，今天这两种方法都是有一定的不足的，来对比一下。
·刚才第一种方法只可以在火狐上面运行，这个方法目前来说就是兼容性不好，但是它没有其它布局上的问题。大家留意这些图片的顺序，这里是第1张、第2张、第3张、第4张，它是这样子从左到右把这些照片给你排序的，这个排序就是希望的。
·再回来chrome浏览器，这是用第二种方法来写的，这个方法的兼容性比较好，但是它的排序有一点小问题，它是这样子1张、它是从上到下这样子来排序的。第3张、第4张。如果你的项目对图片的排序没有要求，那基本上也没什么问题，都可以用。但是很多项目这些图片的数据是实时动态加载的，都是希望最新的显示在最前面，并且从左到右这样子来阅读对吧？这样这个方法它就不好用了。
其实用CSS来写瀑布流，还有一个方法会稍微完美一点，既可以兼顾到兼容性的问题，也可以解决掉排序的问题，稍微复杂一点，大家不妨自己来思考一下，我后面再抽时间来带大家做。
这个视频就到这里，感谢大家的收看。