waterFall

瀑布流布局函数-定位的实现方式（父绝子相，子元素须设置宽度）

配置项

参数	类型	是否必选	默认值	参数描述
className	String	是	-	子元素类名
columns	Number	否	3	列数
columnGap	Number	否	0	列之间的间距
rowGap	Number	否	0	行之间的间距

返回值

类型	描述
void	无返回值

示例

waterFall('item', 3, 10, 10)

源码

js

export function waterFall(className, columns = 3, columnGap = 0, rowGap = 0) {
    // 获取待排序的所有DOM元素
    let items = document.getElementsByClassName(className);
    // 获取待排序的元素块的宽度
    let itemWidth = items[0].offsetWidth;
    // 用来存储每一列的高度
    let columnHeightArr = new Array(columns).fill(0);
    for (let i = 0; i < items.length; i++) {
        // 最小高度,minHeight=0 说明是第一行
        let minHeight = Math.min(...columnHeightArr);
        let newRowGap = minHeight ? rowGap : 0;
        // 最小高度列的索引
        let index = columnHeightArr.findIndex(item => item === minHeight);
        items[i].style.top = minHeight + newRowGap + 'px';
        items[i].style.left = (itemWidth + columnGap) * index + 'px';
        columnHeightArr[index] = minHeight + items[i].offsetHeight + newRowGap;
    }
}