在网站制作中，瀑布流布局的使用在近两年网页制作中使用越来越多，比如常见的app，微信小程序中经常会使用到，今天全栈网络教大家如何仅仅通过css3来实现瀑布流列表的效果，从而避免使用大量javascript代码来实现。
什么是网页瀑布流布局？
瀑布流简单来说就是网页列表数据会根据列表内容高度自动从左到右，从上而下进行内容排列，同时瀑布流的另一个优势就是会根据屏幕宽度自动适应宽度变化。由于传统的浮动布局或者行内元素布局块元素单独成行，会导致元素上下之间出现大量留白。
为什么要用纯css来实现瀑布流布局？
不同于javascript瀑布流实现中出现的大量代码，纯css可以仅仅通过几行的样式写法来实现列表瀑布流布局。
css瀑布流具体如何实现？
以下html代码就是网站制作中实现css瀑布流的文档，大家可以直接进行模仿。
<!DOCTYPE html>
<head>
<title>CSS3瀑布流</title>
<style>
/*大层瀑布流大盒子*/
.container{width:50%;margin: 30px auto;}
/*瀑布流布局样式*/
.waterfall{ column-count:2; }
/*每一个列表的内容样式*/
.item{ padding: 1em; margin:1em; break-inside: avoid; border: 2px solid #000; }
.item img{ width: 100%; }
</style>
</head>
<body>
掌握点：
1、column-count 该css属性把大盒子内的列表共分为两列
2、break-inside: avoid; 避免元素内部断行并产生新列
<div class="container">
<ul class="waterfall">
<li class="item">
<img src="https://www.gyzgl.com/uploads/allimg/181008/1-1Q00P15452324.jpg">
<p>我是网站制作中瀑布流布局内容，在这里使用css样式来实现而不需要复杂的js代码，这种瀑布流在网站制作中可是使用的很普遍</p>
</li>
<li class="item">
<img src="https://www.gyzgl.com/uploads/allimg/181008/1-1Q00P15452324.jpg">
<p>我是网站制作中瀑布流布局内容，仅仅使用css样式来实现的呦</p>
</li>
<li class="item">
<img src="https://www.gyzgl.com/uploads/allimg/181008/1-1Q00P15452324.jpg">
<p>我是网站制作中瀑布流布局内容</p>
</li>
<li class="item">
<img src="https://www.gyzgl.com/uploads/allimg/181008/1-1Q00P15452324.jpg">
<p> 我是网站制作中瀑布流布局内容，这里面的内容是用来填充的里面高度的</p>
</li>
<li class="item">
<img src="https://www.gyzgl.com/uploads/allimg/181008/1-1Q00P15452324.jpg">
<p>我是网站制作中瀑布流布局内容，为了更直观的显示，大家可以直接复制上面的这些html+css代码，放在空白文档中进行测试，这里的文字只是为了撑起内容的高度。</p>
</li>
</ul>
</div>
</body>
</html>
以上就是在郑州网站制作中，常用的网页瀑布流展示方式如何通过简单的css样式进行实现，全栈网络专业从事郑州网站制作，淘宝装修，欢迎大家随时来电咨询。
本文关键词：
瀑布流 未经允许不得转载：郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络
