瀑布流布局

等宽瀑布流

实现思路：

• 首先设置列宽度，然后计算能够展示的列数。
• 向每一列中添加图片。

代码：

<template>
    <div ref="waterfall"
         class="waterfall-width-column">
        <div style="display:flex;justify-content:space-around">
            <div v-for="(item,index) in loadImgList"
                :key="index">
                <div v-for="imgItem in item"
                    :key="imgItem">
                    <img :src="imgItem"
                         :style="{width: `${colWidth}px`}"/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            loadImgList: [],
            colWidth: 400,
            colNumbers: 1
        }
    },
    mounted () {
        this.getColNumbers();
    },
    methods: {
        getColNumbers () {
            let clientWidth = this.$refs.waterfall.clientWidth;
            this.colNumbers = Math.floor(clientWidth / this.colWidth)
            console.log('clientWidth', clientWidth)
            console.log('colNumber', this.colNumbers)
            this.loadImage()
        },
        loadImage () {
            for (let i = 0; i < 11; i++) {
                // 行数
                let colIndex = i % this.colNumbers;
                let url = require(`@/assets/img_${i + 1}.jpg`)
                if (this.loadImgList[colIndex]) {
                    this.loadImgList[colIndex].push(url)
                } else {
                    this.$set(this.loadImgList, colIndex, [url])
                }
                console.log(this.loadImgList)
            }
        }
    }
}
</script>
<style scoped lang="scss">
</style>

效果：

等高瀑布流

实现思路：Flex布局

• 首先给图片一个固定高度，然后利用flex-grow的比例分配的特性。
• 给图片设定object-fit属性让其保持比例充满容器。

代码：

<template>
    <div ref="waterfall"
         class="waterfall-width-column">
        <div style="display:flex;flex-wrap: wrap;">
            <div v-for="(item,index) in loadImgList"
                 :key="index"
                 style="flex:1">
                <img :src="item"
                     height="400px"
                     style="object-fit:cover" />
            </div>

        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            loadImgList: [],
            colWidth: 400,
            colNumbers: 1
        }
    },
    mounted () {
        this.loadImage();
    },
    methods: {
        loadImage () {
            for (let i = 0; i < 11; i++) {
                // 行数
                let url = require(`@/assets/img_${i + 1}.jpg`)
                this.$set(this.loadImgList, i, [url])

            }
        }
    }
}
</script>
<style scoped lang="scss">
</style>

效果：