<template>
    <div id="container">
        <div><img src="../../assets/personnel/test/1.jpg" alt=""></div>
        <div><img src="../../assets/personnel/test/2.jpg" alt=""></div>
        <div><img src="../../assets/personnel/test/3.jpg" alt=""></div>
        <div><img src="../../assets/personnel/test/4.jpg" alt=""></div>
        <div><img src="../../assets/personnel/test/5.jpg" alt=""></div>
        <div><img src="../../assets/personnel/test/6.jpg" alt=""></div>
        <div><img src="../../assets/personnel/test/7.jpg" alt=""></div>
        <div><img src="../../assets/personnel/test/8.jpg" alt=""></div>
        <div><img src="../../assets/personnel/test/9.jpg" alt=""></div>
    </div>
</template>

<script>
    export default {
        name: "waterfall",
        mounted(){
            setTimeout(this.calc(), 3000)

        },
        methods: {
            calc(){
                console.log(2)
                let spacing = 10,					//间距
                    // divs = $("div",$("#container")),//获取#container下的所有div
                    divs = $("#container div"),
                    len = $("#container").find('div').length,
                // len = divs.length,				//一共有多少个div
                colWidth = divs[0].offsetWidth, //获取div的宽度
                    cols = 2;						//限定一行放五个图片
                let height = new Array(cols);		//定义一个数组，数组的容量为5
                height.fill(0);						//将数组中每个元素以0填充
                for(let i = 0;i < len;i++){			//循环迭代每一个div，设置定位
                    let colIndex = min(height);		//调用函数min，获取每一行的数组当中高度最短的下标
                    //设置定位
                    divs[i].style.top = height[colIndex] +10+"px";
                    divs[i].style.left = (colIndex + 1)*spacing + colIndex * colWidth + "px";
                    //累加列高度
                    height[colIndex] += divs[i].offsetHeight + 10;
                }
                //求数组元素最小值的下标的函数
                function min(array){
                    return array.indexOf(Math.min(...array))    //将传递过来的数组当中最小值的下标返回
                }
            }
        }
    }
</script>

<style scoped >
    #container {
        width: 100%;
        position: relative;
        margin: auto;
        height: 10rem;
    }
    #container div {
        width: 40%;
        padding: 10px;
        border: 1px solid;
        border-radius: 5px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
    #container div img {
        width: 100%;  /* 将所有图片统一宽度 */
    }
</style>