8.5 CSS3多列布局

多列布局

CSS3之多列布局columns CSS3中新出現的多列布局(multi-column)是傳統HTML網頁中塊狀布局模式的有力擴充。這種新語法能夠讓WEB開發人員輕松的讓文本呈現多列顯示。

設置列寬

column-width： | auto 設置對象的寬度；使用像素表示。 auto：根據 <’ column-count '> 自定分配寬度

<style>.all{column-width: 300px;}  
</style>
<body><div class="all"><h3>第一段</h3><p>標簽限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體。正如您所了解的那樣，文檔的頭部由 <head> 標簽定義，而主體由 <body> 標簽定義。</p><h3>第一段</h3><p>xmlns 屬性在 XHTML 中是必需的，但在 HTML 中不是。不過，即使 XHTML 文檔中的 <html> 沒有使用此屬性，W3C 的驗證器也不會報錯。這是因為 "xmlns=http://www.w3.org/1999/xhtml" 是一個固定值，即使您沒有包含它，此值也會被添加到 <html> 標簽中。</p><h3>第一段</h3><p>注釋：即使 html 元素是文檔的根元素，它也不包含 doctype 元素。doctype 元素必須位于 html 元素之前。</p><h3>第一段</h3><p>這個例子是一個很簡單的 HTML 文件，使用了盡量少的 HTML 標簽。它向您演示了 body 元素中的內容是如何被瀏覽器顯示的。</p></div>
</body>

設置列數

column-count： | auto 用來定義對象中的列數，使用數字 1-10表示。 auto：根據 <' column-width '> 自定分配寬度

.all{/* 設置列數 */column-count: 3;
}

同時設置列寬和列數

columns: <‘column-width’> || <‘column-count’> 設置對象的列數和每列的寬度。復合屬性。寬度和列數的合成；

.all{/* 設置列寬為100px,分3列，但是還是以列數為標準 */columns:100px 3;
}

列和列之間的間距

column-gap: normal || length， normal是默認值，為1em， length 是用來設置列與列之間的間距。

.all{column-count: 3;/* margin-left  + margin-right */column-gap: 40px;
}

列和列之間的邊框

column-rule：<’ column-rule-width ‘> || <’ column-rule-style ‘> || <’ column-rule-color '> 設置對象的列與列之間的邊框。復合屬性：包括邊框的粗細，顏色，樣式樣式： dotted 點狀邊框 dashed 虛線 double 雙線 solid 實線

.all{column-count: 3;/* margin-left  + margin-right 
/column-gap: 40px;
*  /*3像素的間隔線 */column-rule: 3px dotted gray;
}

列高是否統一

column-fill：auto | balance 設置對象所有列的高度是否統一; auto：列高度自適應內容; balance：所有列的高度以其中最高的一列統一兩個效果基本上一樣，沒有太大變化

橫跨多少列

column-span 屬性規定元素應橫跨多少列。 column-span: 1|all; 默認為1，一般情況下設置為all

<style>.all{column-count: 3;/* margin-left  + margin-right */column-gap: 40px;column-rule: 3px dotted gray;}.p1{column-span: all;}</style>
<div class="all"><p class="p1">這是一個標題</p><h3>第一段</h3><p>標簽限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體。正如您所了解的那樣，文檔的頭部由 <head> 標簽定義，而主體由 <body> 標簽定義。</p><h3>第二段</h3><p>xmlns 屬性在 XHTML 中是必需的，但在 HTML 中不是。不過，即使 XHTML 文檔中的 <html> 沒有使用此屬性，W3C 的驗證器也不會報錯。這是因為 "xmlns=http://www.w3.org/1999/xhtml" 是一個固定值，即使您沒有包含它，此值也會被添加到 <html> 標簽中。</p><h3>第三段</h3><p>注釋：即使 html 元素是文檔的根元素，它也不包含 doctype 元素。doctype 元素必須位于 html 元素之前。</p><h3>第四段</h3><p>這個例子是一個很簡單的 HTML 文件，使用了盡量少的 HTML 標簽。它向您演示了 body 元素中的內容是如何被瀏覽器顯示的。</p>
</div>

案例：使用多列布局實現瀑布流效果


<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>標題</title><link rel="shortcut icon" href="favicon.ico"><style>* {margin: 0;padding: 0;}.container {width: 96%;margin: 20px auto 20px;}.waterfall {/* 最多氛圍多少列 */column-count: 3;-webkit-column-count: 3;-moz-column-count: 3;-ms-column-count: 3;-o-column-count: 3;/* 每列之間的間距是多少 
/column-gap: 15px;-webkit-column-gap: 15px;-moz-column-gap: 15px;-ms-column-gap: 15px;-o-column-gap: 15px;}.item {display: inline-block;width: 100%;
*            /*為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。 */box-sizing: border-box;padding: 1em;background-color: white;border: 1px solid #ccc;border-radius: 4px;-webkit-border-radius: 4px;/* 設置上下間距 */margin-bottom: 10px;/*  需要設置 height: 100%; overflow: auto */height: 100%;overflow: auto;}.item img {width: 100%;padding-bottom: 1em;margin-bottom: 0.5em;border-bottom: 1px solid #cccccc;}</style><body><div class="container"><div class="waterfall"><div class="item"><img src="img/1.jpg" /><p>我來測試demo111111</p></div><div class="item"><img src="img/7.jpg" />我來測試demo2222</div><div class="item"><img src="img/2.jpg" /><p>我來測試demo3333</p></div><div class="item"><img src="img/9.jpg" /><p>我來測試demo4444</p></div><div class="item"><img src="img/4.jpg" /><p>我來測試demo5555</p></div><div class="item"><img src="img/5.jpg" /><p>我來測試demo6666</p></div><div class="item"><img src="img/6.jpg" /><p>我來測試demo7777</p></div><div class="item"><img src="img/8.jpg" /><p>我來測試demo8888</p></div><div class="item"><img src="img/9.jpg" /><p>我來測試demo8888</p></div></div></div></body>
</html>

使用js實現多列布局

<style>
{margin: 0px;padding: 0px;
}
div {width: 150px;position: absolute;border: 1px solid;
}
img {display: inline-block;width: 150px;
}
#wrap {position: relative;width: 100%;
}
</style>
<body><div>瀑布流<img src="./img/1.jpg" alt=""></div><div>瀑布流<img src="./img/2.jpg" alt=""></div><div>瀑布流<img src="./img/3.jpg" alt=""></div><div>瀑布流<img src="./img/4.jpg" alt=""></div><div>瀑布流<img src="./img/5.jpg" alt=""></div><div>瀑布流<img src="./img/6.jpg" alt=""></div><div>瀑布流<img src="./img/7.jpg" alt=""></div><div>瀑布流<img src="./img/8.jpg" alt=""></div><div>瀑布流<img src="./img/9.jpg" alt=""></div>
</body>
<script>var div = document.getElementsByTagName("div");//因為圖片較多，在加載時，就加載圖片window.onload = function(){Full();}// Full()//當窗口大小改變時，重新分列并排序window.onresize = function(){Full();}//瀑布流函數function Full(){//1. 獲取瀑布流求分幾列var pw = document.documentElement.offsetWidth;   //頁面寬度var dw = div[0].offsetWidth;           //每個div寬度var cols = Math.floor(pw/dw);//縫隙數等于列數加1，例如6行有7個縫隙var white = (pw - dw * cols)/(cols + 1);//每一列定位var t = 10;var arr = []; // 2. 默認以第一張圖片的寬度為多列布局每列的寬度for(var i = 0;i<cols;i++){var pos = {//計算每個div的坐標(開始讓每個top取一個固定值)//橫坐標每次不變，只有top變/*div[0]   left: whitediv[1]   left: white2 + dw*        div[2]   left: white*3 + dw*2*/x:Math.floor((i+1)*white+dw*i),y:t}arr.push(pos);      //將坐標存入數組}for(var i=0; i<div.length;i++){var index = getMinTop(arr);// 循環遍歷第一行數據div[i].style.left = arr[index].x+'px';div[i].style.top = arr[index].y+'px';// 把圖片的高度存儲在元素的y屬性中；改變已經顯示圖片的y值arr[index].y += div[i].offsetHeight + t;// 查找最小高度的列，默認以arr[0]的y坐標作為最小的列// 第二行最小的列，就是圖片高度最低的}}//求每次最小高度的列function getMinTop(arr){var minT = arr[0].y;// console.log(minT);var index = 0;for(var k = 0;k<arr.length;k++){if(arr[k].y < minT){minT = arr[k].y;index = k;}}return index;}
</script>

參考文檔：https://blog.csdn.net/qq_47443027/article/details/119981423