我寫小程序像菜虛鯤——三、你能17張牌把我秒殺，我當場把電腦屏幕吃掉

時間 2019-11-08

標籤程序秒殺當場電腦屏幕吃掉简体版

原文原文鏈接

標題和內容無關，只是前幾天看盧姥爺的鬼畜：www.bilibili.com/video/av126…，順帶消費下，上柱香~css

多是我不夠騷了(或者發的時間不對)，不過仍是建議閱讀下「逆向微信小程序」那部份內容。本節來肝下「微信小程序中佈局」相關姿式點。但願你學完本章後，能夠：根據設計屍給的設計稿，堆砌控件。本節內容較多，建議點贊收藏之後有時間再看，畢竟 收藏了≈我會了，本文姿式點安排以下：前端

一、物理像素，設備獨立像素，DPR，微信小程序特有尺寸rpx，設計稿尺寸；

二、WXSS樣式導入的幾種方式；

三、如何經過選擇器定位到元素；

四、文檔流與脫離文檔流；

五、塊級元素與行內元素，經過display屬性轉換；

六、盒子模型，box-sizing，外邊距合併問題；

七、定位：相對定位，絕對定位，固定定位；

八、浮動與清除浮動；

九、多列布局multi-column，實現多列文本與簡單圖片瀑布流；

十、flex彈性佈局；

十一、佈局實戰：仿寫每日優鮮首頁。

0x一、微信小程序特有單位——rpx

px（pixel）像素，相信你們都不陌生吧，可是有三個名詞要說下：css3

① 「物理像素」：設備屏幕實際擁有的像素點，好比iPhone 6的分辨率爲750*1334，表明水平方向有750個像素點，豎直方向有1334個像素點。
②「設備獨立像素」：可理解爲反映在CSS/JS代碼裏像素點數。
③「設備像素比(DPR)」：一個設備的物理像素與邏輯像素的比。

看到這裏，讀者可能會有疑問：爲什麼像素還要分兩種，有區別嗎？web

答：好久之前是沒區別的，在CSS裏寫1px，屏幕就渲染一個物理像素，即DPR=1。隨着蘋果Retina技術的出現，這種局面被打破，使用Retina技術能夠使用多個物理像素來渲染一個邏輯像素，屏幕尺寸沒變，分辨率變高了，而人的視網膜沒法分辨出屏幕上的像素點，這也是感受Retina屏卻比非Retina屏細膩的緣由。小程序

在Retina屏上DPR再也不是1，而是大於1，好比iPhone 6的DPR=2，物理像素是：750x1334，對應的邏輯像素: (750x1334)/2 = 375x667。微信小程序

名詞科普到這裏，接着說回rpx（responsive pixel），微信小程序特有尺寸單位，能夠根據「屏幕寬度進行自適應」，規定：小程序屏幕寬度爲750rpx。能夠簡單地理解爲：微信

把頁面按比例分割爲750份，而每一份的大小是1rpx。網絡

而後iPhone 6的物理像素恰好爲750*1334，因此在iPhone 6中：app

1rpx = 1個物理像素(1px)

因此，若是設計屍以 iPhone 6 爲標準畫設計稿的話，標註是多少px，小程序就直接多少rpx，不用換算，並且還不用擔憂在各個平臺上的適配狀況，臥槽，美滋滋啊！！！最後總結下結論，不可貴出這樣的等式：

在iPhone 6中：1rpx = 0.5px邏輯像素 = 1物理像素

0x二、WXSS樣式導入

關於CSS樣式上節課就談了，微信小程序中的WXSS稍微有點不同。除了在目錄下建立同名的.wxss文件會自動引用外。還可使用@import語句 導入外部樣式，相對路徑，示例以下：

/* app.wxss */
@import './wxss/base.wxss';
複製代碼

除此以外，可使用 style屬性 設置內聯樣式，通常是接收 動態樣式 用，而把 靜態樣式 統一寫到class中，示例以下：

<view style="color:{{color}};" />
複製代碼

0x三、選擇器定位元素

爲元素設置樣式，那你也得先定位到元素是吧！有以下三類最基礎的選擇器：

「標籤選擇器」：文檔中 全部的特定標籤 使用同一個CSS樣式。
「id選擇器」：元素以 id屬性 來設置id選擇器，選擇器以「#」來定義。
「類選擇器」：元素以 class屬性 來設置類選擇器，能夠在多個元素中使用，以「.」號顯示。

接着是具體定位到元素的各類操做示例：

/* 標籤選擇器*/
p{color: red;}

/* id選擇器 */
#id-choose {color: green;}

/* class選擇器 */
.class-choose {color: blue;}

/* 對選擇器進行分組，共享同一個樣式，逗號隔開 */
text, button, checkbox { color: green; }
.text-1, .text-2 { color: gold }

/* x元素內全部的y元素，選擇做爲x元素後代的y元素，稱後代選擇器或包含選擇器 */
view text{ color: purple }
/* 還可以使用*通配符選擇全部元素 */
view *{ color: purple }

/* 父元素爲x元素中的全部y元素，又稱：子元素選擇器 */
view > text{ color: red }

/* x元素後的全部y元素，又稱：相鄰兄弟選擇器 */
view + text{ color: red }

/* 選擇前面有x元素的每一個y元素 */
view ~ text{ color: red }

/* 還能夠經過屬性來定位元素 */
<view aria-role="button" aria-label="submit-label">提交</view>
[aria-role]{ color: purple }   /* 帶有某屬性 */
[aria-role="button"]{ color: purple }   /* 帶某屬性且等於xxx */
[aria-label~="label"]{color: purple}    /* 帶某屬性且包含XXX單詞 */
[aria-label|="submit"]{color: purple}   /* 帶某屬性且XXX單詞開頭 */
[aria-label^="su"]{color: purple}   /* 帶某屬性且xx開頭，不須要單詞 */
[aria-label$="el"]{color: purple}   /* 帶某屬性且xx結尾，不須要單詞 */
[aria-label*="el"]{color: purple}   /* 帶某屬性且包含xxx */
/* 還能夠搭配元素選擇器玩耍 */
view[aria-role]{ color: purple }

/* 僞類，根據順序定位 */
.content-1 text:first-child{ color: pink }  /* 父元素首個x元素 */
.content-1 text:last-child{ color: pink }  /* 父元素最後一個x元素 */
.content-1 text:nth-child(n){ color: pink }  /* 父元素第n個x元素 */
.content-1 text:nth-last-child(n){ color: pink }  /* 父元素倒數第n個x元素 */

/* 僞元素 */
<view class="content">中間元素</view>
/* 元素前添加內容 */
.content:before{
  content: "插在前面的文字";
  color: red;
}
/* 元素後添加內容 */
.content:after {
  content:url("http://codingboy.xyz/avator.png");
}
複製代碼

注意一點！！！

wxss沒法獲取本地圖片資源，可以使用 網絡圖片，base64後的圖片 或 image標籤！

再注意一點！！！

class屬性值多個空格分隔，好比:<view class="font small blue">，其實就是指定多個class。這樣寫是爲了CSS模塊化設計，減小CSS重複代碼，提升複用性。好比小程序中文本有幾種，樣式是基本同樣的，可能只是字體大小或顏色不一樣，你就能夠這樣玩，代碼示例以下：

<!-- wxml -->
<view class="font">
<view class="font small">
<view class="font small blue">

<!-- wxss -->
.font{ text-align: center; }
.font.small{ text-size: 18rpx; } /* 小號字體 */
.font.big{ text-size: 24rpx; }  /* 大號字體 */
.font.small.blue{ text-color: blue; }    /* 藍色小號字體 */

<!-- 寫了多個，若是有重複屬性定義，那麼後面的會覆蓋前面的！ -->
複製代碼

關於選擇器更多內容可移步至：www.w3school.com.cn/cssref/css_…

0x四、文檔流

文檔內元素的流動方向，內聯元素從左往右，塊級元素從上往下。

簡單點說：元素在頁面出現的前後順序。

可能有些模糊，舉個例子：

<view style="background-color: #FFBBFF; height: 96rpx; line-height: 96rpx; text-align:center">塊元素①</view>
<text style="background-color: #CAFF70; ">行內元素①</text>
<text style="background-color: #EED8AE; ">行內元素②</text>
<text style="background-color: #FFA500; ">行內元素③</text>
<view style="background-color: #F08080; height: 96rpx; line-height: 96rpx; text-align:center">塊元素②</view>
<view style="background-color: #EEEE00; height: 96rpx; line-height: 96rpx; text-align:center">塊元素③</view>
複製代碼

運行結果以下：

按照：內聯元素從左往右，塊級元素從上往下(獨佔一行)，這樣的規則就是「正常文檔流」，若是咱們經過一些手段，使得元素不按照這個規則進行排布，就叫「脫離文檔流」。好比爲行內元素②設置一個向右的浮動：

<text style="background-color: #EED8AE; float:right">行內元素②</text>
複製代碼

就變成了這樣：

行內元素②沒有跟在①後，而③也沒有跟在②後，這就是 脫離文檔流。

0x五、塊級元素(block)與行內(inline)元素

塊級元素：

獨佔一行，且寬度會佔滿父元素寬度，即容器的100%；

可設置width和height，不過即便設置了width仍是會獨佔一行；

可設置margin和padding；

可容納內聯元素和其餘塊元素；

好比：<view>標籤

行內(內聯)元素：

不獨佔一行，相鄰行內元素能夠排在同一行；

寬高爲文字或圖片的寬高，不可變，即設置width/height無效；

設置margin和padding 水平方向有效，垂直方向無效；

只能容納文本或者其餘內聯元素；

好比：<text>標籤

能夠經過 display 屬性來完成行內元素和塊級元素的切換，有三個可選值：

block：設置爲塊元素。

inline：設置爲行內元素。

inline-block：行內塊元素，讓元素具備塊級元素和行內元素的特性，即能
設置寬高，margin和padding生效，還能夠和其餘行內元素並排。

舉個例子：

<!-- test.wxml -->
<view class="container">
  <view class="block-1">塊元素-1</view>
  <view class="block-2">塊元素-2</view>
  <view class="block-3">塊元素-3</view>
  <view class="block-3">塊元素-4</view>
  <text class="inline-1">行內元素-1</text>
  <text class="inline-2">行內元素-2</text>
  <text class="inline-3">行內元素-3</text>
  <view>
    <view class="display-inline">行內塊元素-1</view>
    <view class="display-inline">行內塊元素-2</view>
  </view>
  <view>
    <text class="display-block">行內塊元素-3</text>
    <text class="display-block">行內塊元素-4</text>
  </view>
  <view>
    <view class="display-inline-block">行內塊元素-5</view>
    <view class="display-inline-block">行內塊元素-6</view>
  </view>
</view>
複製代碼

/* test.wxss */
/* 塊元素 */
.block-1{
  background: red
}
/* 塊元素能夠直接設置margin和padding */
.block-2 {
  background: greenyellow;
  margin-right: 50rpx;
  margin-top: 50rpx;
  padding-bottom: 25rpx;
  padding-left: 25rpx;
}

/* 塊元素設置寬高，可是依舊是佔一行 */
.block-3 {
  background: paleturquoise;
  height: 96rpx;
  width: 200rpx;
}

/* 行內元素 */
.inline-1 {
  background: red
}

/* 行內元素設置margin和padding，只有水平方向生效 */
.inline-2 {
  background: greenyellow;
  margin-right: 50rpx;
  margin-top: 50rpx;
  padding-bottom: 25rpx;
  padding-left: 25rpx;
}

/* 行內元素設置寬高不生效 */
.inline-3 {
  background: paleturquoise;
  height: 96rpx;
  width: 200rpx;
}

/* 塊元素轉換爲行內元素 */
.display-inline {
  display: inline;
  background: orange;
  margin-right: 50rpx;
  padding-bottom: 25rpx;
  padding-left: 25rpx;
}

/* 行內元素轉換爲塊元素 */
.display-block {
  display: block;
  background: pink;
  margin-right: 50rpx;
  padding-bottom: 25rpx;
  padding-left: 25rpx;
  margin-top: 40rpx;
  height: 96rpx;
  width: 200rpx;
}

/* 行內塊元素，同時擁有塊級元素和行內元素的特性 */
.display-inline-block {
  display: inline-block;
  width: 300rpx;
  height: 100rpx;
  background: gold;
  margin-left: 50rpx;
  margin-top: 20rpx;
}
複製代碼

運行結果以下：

0x六、盒子模型

元素被描繪成「矩形盒子」，這些盒子經過一個模型來描繪它的佔用空間，即「盒子模型」。

如圖，盒子模型經過下述四個邊界來描述：

Margin（外邊距）—— 邊框外的區域，外邊距是透明的。
Border（邊框）—— 圍繞在內邊距和內容外的邊框。
Padding（內邊距）—— 內容周圍的區域，內邊距是透明的。
Content（內容）—— 盒子的內容，顯示文本和圖像。

暫且把這個大盒子稱爲「元素框」，設置width和height指的是內容部分寬高，設置內外邊距和邊框不會影響內容區域的尺寸，可是會增長元素框的總尺寸。舉個例子，你定義了一個48rpx48rpx的view，可是若是你還設置了margin或padding，那麼這個元素的元素框尺寸就不止48rpx48rpx了！

① box-sizing屬性

若是你想設置「元素框」的寬高固定，不會由於設置了邊距和邊框而改變寬高，可使用「box-sizing」來實現，該屬性有下述兩個可選值：

content-box：寬高僅是內容寬高，加上padding和border，模型寬高會變大.

border-box：以border爲邊界，寬高是包括邊框和內邊距的，設置padding模型寬高也不會變。

使用代碼示例以下：

<!-- test.wxml -->
<view class="view-wrapper">
  <view class="view-1">元素1</view>
  <view class="view-2">元素2</view>
</view>
複製代碼

/* test.wxss */
page {
  background: gray;
}

view {
  text-align: center;
  width: 240rpx;
  height: 240rpx;
  line-height: 240rpx;
  border: 10rpx solid white;
}

.view-wrapper {
  width: 75%;
  background: gold;
  padding: 50rpx;
  overflow: hidden;
  border: none;
}

.view-1 {
  background: greenyellow;
  box-sizing: content-box;
  float: left;
}

.view-2 {
  background: blueviolet;
  box-sizing: border-box;
  float: right;
}
複製代碼

運行結果以下：

② 外邊距合併問題

當兩個或更多垂直外邊距相遇時，它們將造成一個外邊距，合併後的外間距高度等於兩個元素中外邊距高度中的較大者。

單看概念有點含糊，寫個簡單的例子來幫助理解（相鄰元素）：

<!-- test.wxml -->
<view class="container">
  <view class="view-1">元素1</view>
  <view class="view-2">元素2</view>
</view>
複製代碼

接着設置兩個樣式

.view-1 { background: gold; }
.view-2 { background: red; }
複製代碼

接着按照下述步驟修改樣式：

① view-1設置：margin-bottom: 50rpx。

② 註釋掉view-1的樣式，view-2設置：margin-top: 10rpx。

③ 去掉view-1的註釋。

每一步的結果以下：

如圖，兩個元素最後的邊距是50rpx，而不是50rpx + 10rpx = 60rpx；
接着咱們再來試試負值的狀況

.view-1 { background: gold; margin-bottom: -10rpx}
.view-2 { background: red; margin-top: 30rpx}
複製代碼

運行結果以下：

不難發現此時的外邊距是20rpx，再試試負數比整數大的狀況：

.view-1 { background: gold; margin-bottom: 10rpx}
.view-2 { background: red; margin-top: -20rpx}
複製代碼

一樣不難發現此時的外邊距是-10rpx，再試試兩個都是負數的狀況：

.view-1 { background: gold; margin-bottom: -10rpx}
.view-2 { background: red; margin-top: -20rpx}
複製代碼

此時的外邊距是-20rpx，分析計算下規律：

一正一負，先求絕對值差(絕對值大-絕對值小)，再設置正負；

同正同負：去絕對值大的那個，在設置正負。

若是不想面對外邊距合併問題，有下述幾種規避方法：

① 下面的元素設置絕對定位：position:absolute;

② 下面的元素設置下浮動：float:left;

③ 任意一個盒子設置爲爲行內塊元素：dispaly:inline-block；

除了上面這種「相鄰元素」會出現外邊距合併問題外「父子元素」也可能會，
沒有內邊距和邊框隔開。寫個簡單的測試例子體驗下：

<view class="view-1">
  <view class="view-2">元素</view>
</view>
複製代碼

設置兩個樣式，灰色背景方便對比，設置一個左邊的間距方便看。

page { background: gray; }
.view-1 { background: gold; }
.view-2 { background: red; margin-left: 50rpx;}
複製代碼

接着按照下述步驟修改樣式：

① view-2設置：margin-top:20rpx。

② 註釋掉view-2，view-1設置：margin-top: 50rpx。

③ 去掉view-2的註釋。

每一步的結果以下：

有下述幾種方法能夠規避父子元素外邊距合併問題：

① 父元素設置內邊距：padding-top：1rpx；

② 父元素設置：overflow: hidden;

③ 父元素設置邊框：border:1rpx solid transparent;

關於外邊距合併就說那麼多吧，知道怎麼規避就好，具體緣由涉及到BFC(Block Formatting Context，塊級格式化上下文)，目前還不知道具體是啥，後面研究了再另外開一片介紹吧。

0x七、定位

讓元素脫離文檔流的辦法是：定位，浮動或者多列布局，這裏先講解一波定位。
經過一個例子來幫助理解，先定義一個沒有使用定位的頁面。

<!-- test.wxml -->
<view class="view-wrapper">
  <view class="view-1">元素1</view>
  <view class="view-2">元素2</view>
  <view class="view-3">元素3</view>
  <view class="view-4">元素4</view>
</view>
複製代碼

/* test.wxss */
view {
  display: inline-block;
  padding: 10px
}
.view-wrapper { background: gold; }
.view-1 { background: greenyellow; }
.view-2 { background: blueviolet; }
.view-3 { background: orange; }
.view-4 { background: pink; }
複製代碼

運行結果以下：

① 相對定位

相對於它在「文檔流中的位置的起始點」進行移動，經過例子來體驗下，這裏咱們爲元素2添加下述樣式：

position: relative;
left: 50rpx;
top: 50rpx;
複製代碼

運行結果以下：

能夠看到元素2從起始點開始，左邊和上面都偏移50rpx，此處有個細節：偏移前的空間依舊存在！另外，另外注意 起始點 這個字眼，元素是基於起始點進行偏移的，好比爲外層元素設置一個margin-left: 50rpx; 運行後的效果以下：

② 絕對定位

徹底從文檔流中抽離出來，可放到頁面的任何位置。把上面設置的margin-left:50rpx刪掉，接着把relative; 改成 absolute；運行效果以下：

能夠看到，偏移前的空間已被刪除！絕對佈局是這樣的定位的：

「相對於它的父元素來定位」，若是父元素沒有設置定位，就找父元素的父元素，依次往上，直至遇到設置了定位的父元素未知，若是沒找到，就會相對於文檔 body進行定位。因此這裏是基於body進行定位的，咱們能夠試下爲外層的view設置position: relative，接着運行看下效果：

購物車那種數字小紅點通常就是用絕對定位實現的。另外還能夠經過 z-index 屬性來控制重疊排列順序，值大的在上面。改下樣式：

/* index.wxss */
.view-1 {
  background: greenyellow;
  position: absolute;
  left: 0rpx;
}
.view-2 {
  background: blueviolet;
  position: absolute;
  left: 108rpx;
  top: 20rpx;
}
.view-3 {
  background: orange;
  position: absolute;
  top: 100rpx;
  left: 20rpx
}
.view-4 {
  background: pink;
  position: absolute;
  left: 100rpx;
  top: 80rpx;
}
複製代碼

運行結果以下：

加入index-z屬性，控制重疊排列順序：

/* index.wxss */
.view-1 {
  background: greenyellow;
  position: absolute;
  left: 0rpx;
  z-index: 50;
}
.view-2 {
  background: blueviolet;
  position: absolute;
  left: 108rpx;
  top: 20rpx;
  z-index: 30;
}
.view-3 {
  background: orange;
  position: absolute;
  top: 100rpx;
  left: 20rpx;
  z-index: 20;
}
.view-4 {
  background: pink;
  position: absolute;
  left: 100rpx;
  top: 80rpx;
  z-index: 10;
}
複製代碼

運行結果以下：

③ 固定定位

fixed：和absolute相似，超出屏幕的時候也是固定，參考的是窗口，經常使用於須要懸浮固定的場景。好比商品詳情頁，有個一直固定在底部的購買按鈕，頁面內容能夠正常滾動；還有基於窗口的懸浮框等。

0x八、浮動與清除浮動

使元素脫離文檔流，按照指定方向(左或右)移動，直到外邊緣碰到包含框或另外一個浮動框的邊框爲止。浮動前豎向排列，浮動後橫向排列；float屬性，可選值left左，right右。寫個例子體驗下，複用上面的wxml，而後設置新的樣式：

/* test.wxss */
view > view {
  line-height: 100rpx;
  width: 140rpx;
  text-align: center;
}

.view-1 {
  background: greenyellow;
}

.view-2 {
  background: blueviolet;
}

.view-3 {
  background: orange;
}

.view-4 {
  background: pink;
}
複製代碼

運行效果以下：

接着爲元素1設置一個向右的浮動 float:right; 運行結果以下：

如圖，元素1脫離了文檔流(所佔空間被刪除)，而後浮動到右側了，若是想調整元素1的位置，能夠設置margin，好比這裏設置margin-right:20rpx;

接着咱們若是爲元素2也設置一個向右的浮動：

按順序排到了右側，之因此沒有像元素1同樣貼着右邊而是在元素1的左側，由於碰到元素1浮動框了。接着爲元素4頁設置一個右浮動：

另外有一種情形要注意一下，把樣式文件修改成：

/**index.wxss**/

view > view {
  line-height: 100rpx;
  width: 240rpx;
  float: left;
  text-align: center;
}

.view-1 {
  background: greenyellow;
  height: 140rpx;
}

.view-2 {
  background: blueviolet;
}

.view-3 {
  background: orange;
}

.view-4 {
  background: pink;
}
複製代碼

包含框太窄，沒法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它浮動元素「卡住」.

接着說下「清除浮動」，示例代碼以下：

<!-- test.wxml -->
<view class="view-wrapper">
  <view class="view-1">元素1</view>
  <view class="view-2">元素2</view>
</view>
複製代碼

/* test.wxss */
page {
  background: gray;
}

.view-wrapper {
  width: 75%;
  background: gold;
  padding: 10rpx;
}

view > view {
  width: 240rpx;
  text-align: center;
}

.view-1 {
  background: greenyellow;
}

.view-2 {
  background: blueviolet;
}

.view-3 {
  background: orange;
}

.view-4 {
  background: pink;
}
複製代碼

運行結果以下：

接着爲兩個元素分別設置左和右的浮動，運行結果以下：

臥槽，怎麼就這樣了？浮動帶來的影響，能夠爲經過設置屬性overflow: hidden; 來清除浮動。

除此以外還能夠添加一個組件，而後設置clear:both實現相同的效果。

<view style="clear:both"/>
複製代碼

還有一種玩法：經過僞元素:after直接添加

.view-2:after {
  content: "";
  display: block;
  clear: both;
}
複製代碼

固然，你也能夠直接寫死容器元素的高度~

0x九、多列布局multi-column

CSS3新增了一個多欄佈局，用來實現「文本多列」和「瀑布流」很是方便，就順帶講下吧~

相關屬性以下：

column-rule-style：列與列間的邊框樣式；

column-rule-width：兩列的邊框厚度；

column-rule-color：兩列的邊框顏色；

column-rule：上述全部屬性的簡寫，示例: column-rule: 1px solid lightblue;

column-count：建立多列，指定須要分割的列數；

column-width：列的寬度；

columns：column-width 和 column-count 的簡寫。

column-gap：列與列間的間隙；

column-span：是否跨多欄顯示；

column-fill：指定如何填充列；

文本多列的代碼示例以下：

<!-- test.wxml -->
<view class="view-wrapper">
  <view class="view-1">你們好，我是練習時長兩年半的我的練習生菜虛鯤，我喜歡唱，跳，rap，籃球，Music！</view>
</view>
複製代碼

/* test.wxss */
.view-1 {
  columns:auto 5;
  column-rule: 5rpx solid lightblue;
}
複製代碼

運行結果以下：

實現一個簡易圖片瀑布流示例以下：

//test.js，新增一堆圖片URL
Page({
  data: {
    pics: [
      "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg",
      "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg",
      "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg",
      "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg",
      "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg",
      "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg",
      "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg",
    ]
  },
})
複製代碼

<!-- test.wxml，利用wx:for生成控件 -->
<view class="content">
  <block wx:for="{{pics}}">
    <image src="{{item}}" mode="widthFix"></image>
  </block>
</view>
複製代碼

/* test.wxss */
page {
  background: gray;
}

.content {
  columns: auto 3;
  width: 100%;
  column-gap: 5rpx;
}

image {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 5rpx;
}
複製代碼

運行結果以下：

瀑布流是實現了，可是左下角的蕾姆醬被切成兩半了，若是不想切斷，能夠爲子元素設置「break-inside」屬性來防止多列布局，分頁媒體和多區域上下文中的意外中斷。直接在image的樣式裏添加：

break-inside: avoid;
複製代碼

運行後結果以下：

0x十、flex彈性佈局

學習完前面的內容，咱們能夠經過display，position，float來佈局，可是靈活性較差。2009年，w3c提出了一種新的佈局方案：flex彈性佈局，能夠簡便、完整、響應式地實現多種頁面佈局。任何元素均可以開啓彈性佈局，採用Flex佈局的元素，稱爲「Flex容器(flex container)」，它裏面全部的子元素會自動成爲容器成員，稱爲「Flex 項目(flex item)」。