js实现瀑布流

一、瀑布流布局

瀑布流布局：是图片等宽不等高。从第二行开始，将每个图片放在高度最小的位置，视觉上会表现为参差不齐的布局。
实现的方式：对应父元素进行相对定位，图片所在的盒子进行绝对定位。通过计算设置top值与left值。

二、如何实现瀑布流布局

    .waterfall {
        position: relative;
    }
    .pic {
        position: absolute;
        padding: 10px;
        border: 1px solid #3b397d;
        border-radius: 20px;
        text-align: center;
    }
    .pic>img {
        width: 100%;
    }

<div class="waterfall">
        <div class="pic">
            <img src="" />
        </div>
        <div class="pic">
            <img  src="" />
          </div> 
</div>

一、页面加载完成执行函数：window.onload
二、传参，将传入waterfall与pic节点传入函数waterFall
三、获取可视窗口waterfall节点的宽度
四、计算每个pic的宽度
1、计算出行间距的
2、将可视窗口宽度减去行间隔的宽度
3、将减去的值除以每个个数column
五、获取所有pic节点
六、通过for循环完成瀑布流的设置
1、设置每一个pic的宽度
2、获取每一个pic的高
3、通过判断，区分第一行和非第一行
4、给第一行的进行定位
5、将获取的pic的高push到一个数组记录下来
6、在非第一行中，找到数组的最小值
7、获取最小值的索引
8、对非第一行的pic进行定位，top为最小值的高，left为pic宽加行间距乘以最小值的索引
9、对数组中的最小值进行修改

  window.onload = () => {
        /* 传入waterfall与pic节点，调用函数waterFall */
        waterFall('.waterfall', '.pic')
    }
    // column每行个数
    // lineSpace行间距
    // rowSpace列间距

    function waterFall(waterfall, pic, column = 2, lineSpace = 20, rowSpace = 20) {
        /*waterfallWidth可视窗口waterfall的宽度  */
        var waterfallWidth = document.querySelector(waterfall).offsetWidth
        /* 计算每个pic的宽度 */
        var line = (column - 1) * lineSpace
        console.log(line);
        var picWidth = parseInt((waterfallWidth - line) / column)
        console.log(picWidth);
        /* 获取所有pic节点 */
        var picNode = document.querySelectorAll(pic)
        /* 通过for循环完成瀑布流的设置 */
        var picArr = []
        for (var i = 0; i < picNode.length; i++) {
            /* 设置每一个pic的宽度 */
            picNode[i].style.width = picWidth + 'px'
            /* 获取每一个pic的高 */
            var picHeigth = picNode[i].clientHeight

            /* 通过判断，区分第一行和非第一行 */
            if (i < column) {
                /* 给第一行的进行定位 */
                picNode[i].style.top = 0
                picNode[i].style.left = (picWidth + lineSpace) * i + 'px'
                /* 将获取的pic的高push到一个数组记录下来 */
                picArr.push(picHeigth)
            }else{
                /* 在非第一行中，找到数组的最小值 */
                var picArrMin=Math.min(...picArr)
                console.log(picArrMin);
                /* 获取最小值的索引 */
                var mixIndex=picArr.indexOf(picArrMin)
                console.log(mixIndex);
                /* 对非第一行的pic进行定位，top为最小值的高，left为pic宽加行间距乘以最小值的索引 */
                picNode[i].style.top=(picArrMin+rowSpace)+'px'
                picNode[i].style.left=(picWidth+lineSpace)*mixIndex+'px'
                /* 对数组中的最小值进行修改 */
                picArr[mixIndex]+=picHeigth+rowSpace
            }

        }
    }