纯CSS实现瀑布流效果

纯CSS实现瀑布流效果

瀑布流实际上是非常常用的网页布局效果，像著名的设计网站https://www.pinterest.com/就使用了这种布局，好处就是使图片更加富有层次感且更有序，看起来像“瀑布”一样。

现在相关的成熟js套件有很多，例如lsotope.js，masonry.js;
这里讨论一下纯CSS实现的方法、效果以及其局限性。

HTML部分代码
这里的https://picsum.photos/360/460?random=1可以随机生成制定宽高的图片，在前端学习、测试的时候使用非常方便

CSS部分代码

body{
    margin: 4px;
    font-family: Arial, Helvetica, sans-serif;
}
.masonry{
    column-count: 4;
    column-gap: 0;
}
.item{
    padding: 2px;
}
.item img{
    display: block;
    width: 100%;
    height: auto;
}

实现效果：

cloumn是CSS3属性，用于指定列的宽度和数量。cloumn-cout为将文本分为多少列，cloumn-gap为列之间的差距。

简单来说cloumn可以非常方便地实现瀑布流效果，只需要短短两个css样式，但劣势也很明显：它是将图片按列分布的，即图片是从上向下、自左向右排列的，如果网页有某些特定的需求像要实现按时间、按兴趣之类的优先展示，cloumn就不能很好的实现其效果。

本文章主要来自https://www.bilibili.com/video/BV1xa4y147JP视频