CSS实现瀑布流特点：
- 不需要计算，浏览器自动计算，只需设置列宽，性能高；
- 列宽随着浏览器窗口大小进行改变，用户体验不好；
- 图片排序按照垂直顺序排列，打乱图片显示顺序；
源代码：
html.html:使用列表ul、li引入图片
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link href="ss.css" type="text/css" rel="stylesheet"></head><body><div class="dd"> ???<ul> ???????<li><img src="UNADJUSTEDNONRAW_thumb_1c.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_2e.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_4.jpg" width="100px" height="100px"></li> ???</ul> ???<ul> ???????<li><img src="UNADJUSTEDNONRAW_thumb_5.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_10.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_13.jpg" width="100px" height="100px"></li> ???</ul> ???<ul> ???????<li><img src="UNADJUSTEDNONRAW_thumb_14.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_18.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_f.jpg" width="100px" height="100px"></li> ???</ul> ???<ul> ???????<li><img src="UNADJUSTEDNONRAW_thumb_1c.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_2e.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_4.jpg" width="100px" height="100px"></li> ???</ul> ???<ul> ???????<li><img src="UNADJUSTEDNONRAW_thumb_5.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_10.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_13.jpg" width="100px" height="100px"></li> ???</ul> ???<ul> ???????<li><img src="UNADJUSTEDNONRAW_thumb_14.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_18.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_f.jpg" width="100px" height="100px"></li> ???</ul> ???<ul> ???????<li><img src="UNADJUSTEDNONRAW_thumb_1c.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_2e.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_4.jpg" width="100px" height="100px"></li> ???</ul> ???<ul> ???????<li><img src="UNADJUSTEDNONRAW_thumb_5.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_10.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_13.jpg" width="100px" height="100px"></li> ???</ul> ???<ul> ???????<li><img src="UNADJUSTEDNONRAW_thumb_14.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_18.jpg" width="100px" height="100px"></li> ???????<li><img src="UNADJUSTEDNONRAW_thumb_f.jpg" width="100px" height="100px"></li> ???</ul></div></body></html>
ss.css
li{ ???list-style: none; ???border: 1px solid #5fffda; ???margin-top: 10px;}dd{ ???width: auto; ???height:auto; ???margin: 20px auto;}ul{ ???width: auto; ???float: left;}实现效果：
使用CSS实现瀑布流效果
原文地址：https://www.cnblogs.com/lyd447113735/p/8407279.html