在项目开发，app开发，小程序制作中，瀑布流布局的使用非常普遍，今天我们教大家如何仅仅通过css3来实现瀑布流列表的效果，从而避免使用大量javascript代码来实现。
什么是网页瀑布流布局？
瀑布流简单来说就是网页列表数据会根据列表内容高度自动从左到右，从上而下进行内容排列，同时瀑布流的另一个优势就是会根据屏幕宽度自动适应宽度变化。由于传统的浮动布局或者行内元素布局块元素单独成行，会导致元素上下之间出现大量留白。
css代码为什么要用纯css来实现瀑布流布局？
不同于javascript瀑布流实现中出现的大量代码，纯css可以仅仅通过几行的样式写法来实现列表瀑布流布局。css瀑布流具体如何实现？以下html代码就是网站制作中实现css瀑布流的文档，大家可以直接进行模仿。!DOCTYPEhtmlheadtitleCSS3瀑布流/titlestyle/*大层瀑布流大盒子*/.container{width:50%;margin:30pxauto;}/*瀑布流布局样式*/.waterfall{column-count:2;}/*每一个列表的内容样式*/.item{padding:1em;margin:1em;break-inside:avoid;border:2pxsolid#;}.itemimg{width:%;}/style/headbody掌握点：1、column-count该css属性把大盒子内的列表共分为两列2、break-inside:avoid;避免元素内部断行并产生新列divclass=container
ulclass=waterfall
liclass=item
imgsrc=