之前做移動端項目時遇到瀑布流的需求，我都是使用左右兩列分開來做的方式，但是今天在別人的博客中發現另一種更好的寫法【多列布局實現瀑布流】，我覺得很不錯，分享給大家。 **1\. 左右兩列分開布局實現** 先來看看我之前的實現的方式，這種方式也不是很復雜，但是有很多毛病，需要我們去計算元素是放在左邊還是右邊，比較坑爹。 **1.1 定義兩個div容器作為左右兩邊的容器** ~~~markup <div class="container"> <div class="container_left">容器1</div> <div class="container_right">容器2</div> </div> ~~~ **1.2 設置CSS** ~~~css .container{ display: flex; justify-content:space-between;/* 彈性盒子元素會平均地分布在行里 */ } .container_left,.container_right{ flex: 1; } .container_left{ background: #3f3; margin-right: 10px;/* 設置左右兩別容器間的間距 */ } .container_right{ background: #f3f; } ~~~ **1.3 將數據均勻的平分到左右兩別** 我這里采用偶數奇數的方式進行平均分配，偶數在左邊，奇數在右邊，具體代碼如下： ~~~markup <div class="container"> <div class="container_left"> <template v-for="(item, index) in data"> <div :key="index" v-if="index % 2 == 0">偶數在左邊容器</div> </template> </div> <div class="container_right"> <template v-for="(item, index) in data"> <div :key="index" v-if="index % 2 != 0">奇數在右邊容器</div> </template> </div> </div> ~~~ 這種實現方式最麻煩的地方就是需要我們自己去計算數據放在哪邊容器中。不過，下面的多列布局的方式就沒有這個麻煩了。 **2\. 多列布局實現瀑布流** 這種方式不需要計算元素放哪一邊，確實優化了代碼。但是有一個非常不好的缺點：數據是先排列在左邊，左邊排滿后再往右邊插入，這就導致所有新的數據永遠都在左邊，不利于排序。 **2.1 HTML代碼如下：** ~~~markup <div class="container"> <div v-for="(item, index) in data" :key="index"> <img :src="item.image" style="width:100%;display: block;"></img> </div> </div> ~~~ **2.2 CSS部分** ~~~css .container{ column-count: 2;/* 設置有多少列 */ column-width: 50%;/* 設置每一列的寬度 */ column-gap: 10px;/* 設置l兩列之間的間距 */ column-span: 1; } .container>div{ break-inside: avoid;/* 防止溢出內容問題 */ } ~~~ **3\. 浮動布局實現瀑布流** 這種方式也不需要計算元素需要放在哪邊，但是浮動布局有一個非常難以接受的缺點：有可能出現空白的區域，很是難看，所以不推薦大家使用。 **3.1 HTML代碼：** ~~~markup <div class="container"> <div v-for="(item, index) in data" :key="index"> <img :src="item.image" style="width:100%;display: block;" /> </div> </div> ~~~ **3.2 CSS部分** ~~~css .container{ width: 100%; } .container::after{ /* 通過偽元素清除浮動 */ content: ' '; display: block; clear: both; visibility:hidden;/* 隱藏偽元素 */ height: 0; } .container>div{ width: 50%; box-sizing: border-box; } .container>div:nth-child(2n+1){ float: left; } .container>div:nth-child(2n){ float: right; } ~~~