基于CSS3的CSS 多欄(Multi-column)實現瀑布流源碼分享

2024-07-11 08:34:14

字體：大中小

來源：轉載

供稿：網友

CSS 多欄(Multi-column) : http://www.w3chtml.com/css3/properties/multi-column/

Properties 屬性	CSS Version 版本	Inherit From Parent 繼承性	Description 簡介
columns	CSS3	無	CSS3 columns 屬性，是復合屬性，設置或檢索對象的列數和每列的寬度。
column-width	CSS3	無	CSS3 column-width 屬性，設置或檢索對象每列的寬度
column-count	CSS3	無	CSS3 column-count 屬性，設置或檢索對象的列數
column-gap	CSS3	無	CSS3 column-gap 屬性，設置或檢索對象的列與列之間的間隙
column-rule	CSS3	無	CSS3 column-rule 屬性，是復合屬性。設置或檢索對象的列與列之間的邊框。
column-rule-width	CSS3	無	CSS3 column-rule-width 屬性，設置或檢索對象的列與列之間的邊框厚度。
column-rule-style	CSS3	無	CSS3 column-rule-style 屬性，設置或檢索對象的列與列之間的邊框樣式。
column-rule-color	CSS3	無	CSS3 column-rule-color 屬性，設置或檢索對象的列與列之間的邊框顏色。
column-span	CSS3	無	CSS3 column-span 屬性，設置或檢索對象元素是否橫跨所有列。
column-fill	CSS3	無	CSS3 column-fill 屬性，設置或檢索對象所有列的高度是否統一。
column-break-before	CSS3	無	CSS3 column-break-before 屬性，設置或檢索對象之前是否斷行。
column-break-after	CSS3	無	CSS3 column-break-after 屬性，設置或檢索對象之后是否斷行。
column-break-inside	CSS3	無	CSS3 column-break-inside 屬性，設置或檢索對象內部是否斷行。

先來寫一個簡單的圖片頁面

復制代碼代碼如下:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/main.css”>
<script type=”text/javascript” src=”../lib/jquery/jquery-1.11.1.min.js”></script>
</head>
<body>
<div id=”main”>
<div class=”box”>
<div class=”pic”>
<img src=””>
</div>
</div>
<div class=”box”>
<div class=”pic”>
<img src=””>
</div>
</div>
<!– 這里省略多個class為box的div–>
<div class=”box”>
<div class=”pic”>
<img src=””>