实现一个 瀑布流 封装until 工具

 

until 封装

/**
 * @name 瀑布流插件
 * @param { parent } dom 瀑布流的父节点
 * @param { son } 瀑布流子节点
 * @param { col } 瀑布流有几列
 * @param { gap } 子节点的间距
 */

function waterfall (parent, son, col, gap) {
    // 获取父节点
    var con = document.querySelector(parent);
    // 父节点相对定位
    con.style.position = "relative";
    // 获取所有的子节点
    var items = document.querySelectorAll(son);
    // 定义一个数组用于记录每列的最小值
    var arr = [];
    // 控制有几列
    arr.length = col
    // 数组填充0
    arr.fill(0)
    // 定义每个子元素的宽度
    var w = (con.offsetWidth-(col+1)*gap) / col
    for(var i = 0;i
        items[i].style.position = "absolute";
        items[i].style.width = w+"px";
        // 查找最小数据
        var min = Math.min(...arr)
        // 最小数据的下标  也就是第几列
        var minIndex = arr.indexOf(min)
        items[i].style.top = min + "px"
        items[i].style.left = (minIndex * w + (minIndex+1)*gap) + "px"
        // 修改arr的最小值
        arr[minIndex] = min + items[i].offsetHeight + gap
        con.style.height = arr[minIndex] + "px"
    }
}
export default waterfall