ad-manage/src/utils/waterFallBox.ts

function fallBox(props: { ref: { children?: any, offsetWidth: number, style: any }, childrenWidth: number }) {
    let time = setTimeout(() => {
        let { ref: { children }, childrenWidth } = props
        let bodyW = props.ref.offsetWidth
        let column = Math.floor(bodyW / (childrenWidth))
        let margin = Math.floor((bodyW / column - childrenWidth) )
        let allH: number[] = []//所有列的高度
        let marginB = margin > 20 ? margin / 2 : margin
        children.forEach((chi: HTMLElement, index: number) => {
            let h = chi.offsetHeight
            if (index < column) {
                allH.push(h)
                chi.style.left = (childrenWidth + margin) * index + 'px'
                chi.style.top = '0px'
                chi.style.width = childrenWidth + 'px'
                chi.style.position = 'absolute'
            } else {
                let minH: number = Math.min(...allH)//取当前最小高度的children的值
                let eq = allH.indexOf(minH)//取当前最小高度children的位置
                allH[eq] = allH[eq] + h + marginB//更新列的高
                chi.style.left = eq === 0 ? '0px' : (childrenWidth + margin) * eq + 'px'
                chi.style.top = minH ? minH + marginB + 'px' : '0px'
                chi.style.width = childrenWidth + 'px'
                chi.style.position = 'absolute'
            }
        })
        props.ref.style.height = Math.max(...allH) + 20 + 'px'
        clearTimeout(time)
    }, 600)
}

export default fallBox