CSS columns多列布局瀑布流

admin發表於2019-05-28
CSS

瀑布流佈局大家應該很熟悉，圖片站點中有廣泛的應用。

實現的方式多種多樣，本文介紹一下如何利用多列布局屬性實現瀑布流。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{ margin:0; padding:0;}
ul {
  list-style:none;
  width:300px;
  margin:5px auto;
  -moz-column-count:4;
  -webkit-column-count:4;
  column-count:4;
  
  -moz-column-gap:20px;
  -webkit-column-gap:20px;
  column-gap:20px;
  background-color:blue
}
ul li{
  display: inline-block;
  width:60px;
  margin-bottom:20px;  
  background:#ccc; 
}
ul li:nth-child(1){height:50px}
ul li:nth-child(2){height:40px}
ul li:nth-child(3){height:30px}
ul li:nth-child(4){height:35px}
ul li:nth-child(5){height:45px}
ul li:nth-child(6){height:42px}
ul li:nth-child(7){height:38px}
</style>
</head>
<body>
 <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
 </ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/222916hhh5hfhp3epzplkc.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過多列布局屬性實現了簡單的瀑布流佈局效果，簡單分析如下：

（1）.通過column-count設定為4列，column-gap設定每列的間隔為20px。

（2）.然後根據ul的寬度可以計算出每一列的寬度是60px，也就是每一列寬度恰好容納一個li元素。

（3）.然後第一列容納第一個和第二個li元素，以此類推。

相關文章