瀑布流布局的實現(xiàn)方式
要實現(xiàn)的效果如下圖：
首先最容易想到的就是分兩列，然后把內(nèi)容添加進(jìn)去就可以了。
??
<style>.container {display: flex;flex-direction: row;justify-content: space-between;padding: 12px;}.left {margin-right: 6px;flex: 1;}.right {margin-left: 6px;flex: 1;}style><div class="container"><div class="left"><div class="image-box"><img :src="img" alt="" />div><div class="image-box"><img :src="img" alt="" />div>div><div class="right"><div class="image-box"><img :src="img" alt="" />div><div class="image-box"><img :src="img" alt="" />div>div>div>
比較麻煩的就是API返回給我們的是一個列表，但是我們需要兩個列表，需要JS進(jìn)行拆分處理。
let left = []let right = []let data = [img1, img2, img3]for (let i = 0; i < data.length; i++) {if (i % 2 === 0) {left.push(data[i])} else {right.push(data[i])}}
優(yōu)勢：思路清晰簡單，只需要更加列數(shù)然后添加圖片即可，而且圖片的順序可以是從左往右。
也可以使用 CSS3 column 屬性。
關(guān)鍵思路：
1、column-count：指定列數(shù)。3、column-gap: 設(shè)置列之間的間距。
關(guān)鍵代碼：
<template><div class="waterfall-width-column"><div class="image-box" v-for="img in imgList" :key="img"><img :src="img" alt="" />div>div>template><style lang="scss" scoped>.waterfall-width-column {??column-count:?2;column-gap: 10px;.image-box {img {display: block;width: 100%;}}}style>
更加簡單，不用額外計算，直接使用CSS渲染高效。劣勢：圖片的順序是從上向下排列的，這個要看業(yè)務(wù)需求允不允許了。
評論
圖片
表情