原生JS实现瀑布流效果

这里是以3列图片为例，实现一个简单的效果。当然2列或者3列以上也可以，可以根据可视区域宽度以及图片宽度来做动态判断，实现多种屏幕的自适应。这里主要是体现核心思路，即下一列的第一张图片优先贴在上一列高度最小的图片下方，后面的排列方式依此类推。如下图所示
简单写点样式

<style>
        *{margin:0;padding:0;}
        a{display:block;width:33.33%;min-height:100px;}
        #main{position:relative;margin:0 auto;}
        a img{width:90%;margin:5%;}
    </style>

页面上给一个div就可以，其他的要动态渲染

<div id="main"></div>

下面就是我们本场猪脚JS代码了

    let _wh=window.innerHeight;

    let imgWidth,//单张图片的宽
        maxH;//body最大高度

    function loadImg(){//加载图片的函数
        let arr=[];
        for(let i=1;i<=37;i++){
            let str="<a><img src='img/1("+i+").jpg'></a>"//图片命名可以自己的方式来写，务必保持每条对应。
            arr.push(str);
        }
        main.innerHTML=arr.join(" ");
    }

    loadImg();

渲染时要保证为它留一定的时间差，不然图片之间加载速度不同会造成布局重叠的情况。

setTimeout(function(){
        maxH=setImg(main);//安排图片的位置
},500)//可以把这里的时间去掉感受一下

当页面滚动到一定位置时触发加载新图片

window.onscroll=function(){ 
        console.log(document.body.scrollTop)
        if(document.body.scrollTop+100>=maxH-_wh){//到达一定位置时渲染图片
            loadImg();
            maxH=setImg(main);
        };

    }

最核心的在这儿了

// 核心函数，用来安排图片位置
    function setImg(main){
        let imgAll=main.getElementsByTagName("a");
        imgWidth=imgAll[0].clientWidth;

        let arr=[];
        for(let i=0,l=imgAll.length;i<l;i++){
            if(i<3){
                imgAll[i].style.position="absolute";
                imgAll[i].style.top="0px";
                imgAll[i].style.left=imgWidth*i+"px";
                arr.push(imgAll[i].clientHeight);
            }else{
                imgAll[i].style.position="absolute";
                let min=Math.min.apply(null,arr);//当前列最小高度
                let index=arr.indexOf(min);//求最小高度的索引
                imgAll[i].style.top=min+"px";
                imgAll[i].style.left=index*imgWidth+"px";
                arr[index]=arr[index]+parseFloat(imgAll[i].clientHeight);
            }
        }
        return Math.max.apply(Math,arr);
    }

OK，就这么多了！