CSS怎麼實現瀑布流？以下這篇文章跟大家介紹一下使用CSS實現瀑布流的兩種方式，希望對大家有幫助！
瀑布流又稱為瀑布流式佈局，是比較流行的一種網站頁面佈局方式。在手機端進行多圖片展示時會常用到。即多行等寬元素排列，後面的元素依次添加到其後，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。
那麼瀑布串流佈局有哪些實作方式呢？
column 多行佈局實作瀑布流
#column實作瀑布流主要依賴兩個屬性。
column-count屬性，是控制畫面分成多少列。
column-gap屬性，是控制列與列之間的距離。
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局-column</title>
<style>
.box {
margin: 10px;
column-count: 3;
column-gap: 10px;
}
.item {
margin-bottom: 10px;
}
.item img{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
</div>
</body>
</html>
flex 彈性佈局實作瀑布流##flex
實作瀑布流需要將最外層元素設定為display: flex，使用彈性佈局flex-flow:column wrap
設定使其縱向排列並且換行換行height: 100vh
每一列的寬度可用填滿螢幕的高度，也可以設定為單位為px的高度，來容納子元素。calc
函數來設置，即width: calc(100%/3 - 20px)。分成等寬的3列減掉左右兩次的margin距離。展示效果如下<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box { display: flex; flex-flow: column wrap; height: 100vh; } .item { margin: 10px; width: calc(100%/3 - 20px); } .item img{ width: 100%; height:100%; } </style> </head> <body> <div class="box"> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> </div> </body> </html>登入後複製
#案例程式碼
瀑布流實作程式碼：https:/ /gitee.com/yunxii/css-demo/tree/master/waterfall#原文網址：https://juejin.cn/post/7011333433318178846作者：tangxd3更多程式相關知識，請造訪：程式設計影片！ ！
以上是CSS要怎麼實現瀑布流？兩種方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
