前记
又来做标题党水文章了,前段时间在写在线便利贴的时候想做瀑布流,在查找网上的各种方法后,发现要么是用js来实现,要么就需要对瀑布进行分列包裹,我想找一种最简单的方法,只需要CSS而且不需要分列就可以轻松实现瀑布流。经过我的仔细查找,终于被我发现了。
神奇的column-count
在MDN上是这样解释column-count
的:column-count
CSS属性将元素的内容分解为指定的列数。
如图所示:
直接盗用MDN上的例子了,非常的清晰明了,数值设置几就会有几排,另外搭配column-gap
使用,(column-gap
该 CSS 属性用来设置元素列之间的间隔 (gutter) 大小。)效果更好呦。
如图所示:
防止断裂的break-inside
只是设置column-count
会有一个问题,就是,它会默认让你的底部保持一行,这就回造成内容断裂,就像这样:
只要在它自身上设置break-inside: avoid;
就可以有效的避免内容断裂,哈哈哈哈,只要向.box-wrapper
中添加带有.box
类的标签就可以自动实现瀑布流了。
但是缺点呢
说了优点,当然要说一说缺点了,首先就是来看一看兼容性,如图所示:
emmm,看起来还好,但是都是淡绿色,再来看看break-inside
的
也是一个样子,大部分是淡绿色,兼容的好像并不是特别好。
还有一个缺点就是,你每新加一项,column
就会重新布局,页面会闪烁跳动一下,体验不是特别好,想体验的可以去看看我的在线便利贴,去体验一下(建议使用谷歌浏览器),哈哈哈哈。
这是我的demo代码,有兴趣的可以下载来看看,哈哈哈哈。
后记
从完美的角度来说这不是一个合格的瀑布流方式,但是用此来实现瀑布流真的非常的简单方便,CSS文化博大精深,emmm,感觉还有很多未知的领域可以去探索,一起加油。