muz-uni/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