muz-doraemon/src/muz-list-area/x-waterfall-layout.js

自主开发的UniApp组件——Жидзин（Zidjin）系列组件库。

let XWaterfallLayout = {};

/**
 * 调用时可复制本代码进行自动瀑布布局
//当页面加载的时候调用
window.onload = function(){
    // //页面初始化调用
    // XWaterfallLayout.autoWaterfallLayout()
    //每次页面改变大小调用
    window.onresize = (event) => {
        XWaterfallLayout.autoWaterfallLayout("thread-list", "thread-item")
    }
}
**/

XWaterfallLayout.autoWaterfallLayout = function (containerClass = 'thread-list', itemClass = 'thread-item') {
    window.setTimeout(() => {
        // 1. 设置container盒子的宽度
        //      注意：浏览器的可视区域的宽度 / 一个items元素的宽度 = 一行的排列的元素的个数
        // let container = document.getElementById("thread-list")
        let container = document.getElementsByClassName(containerClass);
        let items = document.getElementsByClassName(itemClass);
        if (!container || !container[0]) {
            console.log('XWaterfallLayout: 找到不瀑布流元素!', containerClass, container, itemClass, items);
            return;
        }
        if (!items || items.length === 0) {
            container[0].style.height = 'auto';
            return;
        }
        //获取元素的宽度(含border，padding)
        let width = items[0].offsetWidth;
        //计算出浏览器窗口的宽度
        let clientWidth = document.documentElement.clientWidth;
        //计算出应该放几列（向下取整），为零则取1
        let columnCount = Math.floor(clientWidth / width) || 1;
        //设置容器（父盒子）的宽度
        container[0].style.position = 'relative';
        container[0].style.width = columnCount * width < clientWidth ? columnCount * width + 'px' : '100%';

        // 2.设置每一个items元素的排列位置
        //  第一行整体的top值都是0 后面的依次找上一行高度最小的容器，在它下面进行排列
        let hrr = [];
        for (let i = 0; i < items.length; i++) {
            //定位第一行的图片
            if (i < columnCount) {
                items[i].style.position = 'absolute';
                items[i].style.height = 'auto';
                items[i].style.top = '0px';
                items[i].style.left = i * width + 'px';
                hrr.push(items[i].offsetHeight);
            } else {
                //第一行之后的
                //选择总高度最小的列
                let min = Math.min(...hrr);
                let index = hrr.indexOf(min);
                //将每个元素定位到当前总高度最小的列下
                items[i].style.position = 'absolute';
                items[i].style.height = 'auto';
                items[i].style.top = min + 'px';
                items[i].style.left = index * width + 'px';
                //当前定位的元素加入该列
                hrr[index] += items[i].offsetHeight;
            }
        }
        container[0].style.height = Math.max(...hrr) + 'px';
    }, 50);
};

export default XWaterfallLayout;