内容简介：PC 1366*768缩小一点
效果图
PC 1366*768
缩小一点
板端
鸡端 疯六
这个响应式瀑布流误打误撞写出来的，因为之前看百度写过瀑布流，不太好，好复杂，又要JS什么的，我就懒，算了算了，不写了。
然后今天早上就看完数据结构教程，无聊，顺便看慕课网的瀑布流教程，发现一般般，不过学到了用columns，然后又谷歌到了 break-inside 额，发现很OK喔，就OK了。
我习惯写注释在代码那里，这样感觉容易看懂些，不然看一下代码，看一下解释，麻烦。
滚到最下面是全部代码。
CSS代码：核心
* {
margin: 0;
padding: 0;
}
.waterfalls {
padding:10px;
position: relative;
margin: 0 auto;
columns:200px; /* 每列每个元素最小的宽度 */
column-gap: 20px; /* 每列的距离，不设置这个可以通过margin来设置边距 */
}
.box {
break-inside: avoid; /* 这个是设置多列布局页面下的内容盒子如何中断，如果不加上这个，每列的头个元素就不会置顶，配合columns使用 */
margin-bottom:15px;
/* 如果是非图片瀑布流的话就加上背景吧，不然感觉不太好看。 */
/* background:dodgerblue; */
color:white;
border-radius:5px;
}
.pic img {
width: 100%; /* 建议每个图片宽高为100%，如果不设置宽高，就会溢出外层盒子的，或者设置固定宽度，最好不要宽过外层盒子或者高过外层盒子。这里说的外层盒子就是html代码里的 .box */
height: 100%;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
不加一些样式的问题：
不加 break-inside: avoid;
就是每列元素不置顶嘛，而break-inside: avoid; 我也是刚学的，不太大懂意思:smile:
每个图片的宽度不设置：
/* width: 100%; */ 注释掉
就会这个样子 类似 放羊 管不住
而如果不是图片瀑布流 是其他瀑布流 把每个pic标签去掉就好啦，box里面放要瀑布流的内容
HTML代码：
图片替换成 寄几 本地的
<div class="waterfalls">
<div class="box">
<div class="pic"><img src="images/1.jpg" alt="1.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/2.jpg" alt="2.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/3.jpg" alt="3.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/4.jpg" alt="4.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/5.jpg" alt="5.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/6.jpg" alt="6.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/7.jpg" alt="7.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/8.jpg" alt="8.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/9.jpg" alt="9.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/10.jpg" alt="10.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/11.jpg" alt="11.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/12.jpg" alt="12.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/13.jpg" alt="13.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/14.jpg" alt="14.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/15.jpg" alt="15.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/16.jpg" alt="15.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/17.jpg" alt="15.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/18.jpg" alt="15.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/19.jpg" alt="15.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="images/20.jpg" alt="15.jpg"></div>
</div>
<div class="box">
这是一段文本。兔月大大:crescent_moon:
</div>
</div>
全代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>* {margin: 0;padding: 0;}.waterfalls {padding:10px;position: relative;margin: 0 auto;columns:200px;column-gap: 20px;}.box {break-inside: avoid;margin-bottom:15px;/* background:dodgerblue; */color:white;border-radius:5px;}.pic img {width: 100%;height: 100%;border-radius: 5px;border: 1px solid #ccc;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}</style>
<div class="waterfalls">
<div class="box">
<div class="pic">
<img src="images/1.jpg" alt="1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" alt="2.jpg">
</div></div><div class="box">
<div class="pic">
<img src="images/3.jpg" alt="3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="4.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="5.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" alt="6.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" alt="7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg" alt="8.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg" alt="9.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg" alt="10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg" alt="11.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg" alt="12.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/13.jpg" alt="13.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/14.jpg" alt="14.jpg">
</div>
</div>
<div class="box"><div class="pic"><img src="images/15.jpg" alt="15.jpg"></div></div><div class="box"><div class="pic"><img src="images/16.jpg" alt="15.jpg"></div></div><div class="box"><div class="pic"><img src="images/17.jpg" alt="15.jpg"></div></div><div class="box"><div class="pic"><img src="images/18.jpg" alt="15.jpg"></div></div><div class="box"><div class="pic"><img src="images/19.jpg" alt="15.jpg"></div></div><div class="box"><div class="pic"><img src="images/20.jpg" alt="15.jpg"></div></div><div class="box">这是一段文本。兔月大大:crescent_moon:</div></div></body></html>复制代码
图片可以在behance下载一些，或者国内的一些插图网。
第一次在掘金写，编辑器还行吧，这掘金的编辑器怎么发布后，代码会乱了。
我喜欢语雀的。
谢谢阅读。Thanks
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Building Social Web Applications
Gavin Bell / O'Reilly Media / 2009-10-1 / USD 34.99
Building a social web application that attracts and retains regular visitors, and gets them to interact, isn't easy to do. This book walks you through the tough questions you'll face if you're to crea......一起来看看 《Building Social Web Applications》 这本书的介绍吧!
