JS实现的瀑布流效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40592359/article/details/78366544

之前在慕课网上看过一段讲瀑布流的视频，那个时候跟着视频学了一遍，今天自己写了一个，感觉自己代码跟人一样很不成熟。⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

window.onload=function(){
    imgLoaction("box");//图片加载
    window.onscroll=function(){
        //下拉刷新
        check("box");
    }
};

这是图片加载的代码

function imgLoaction(content){
    var ccontent=document.querySelectorAll("."+content);
    var parent=document.getElementById("container");
    var imgWidth=ccontent[0].offsetWidth;
    var cols=Math.floor(document.documentElement.clientWidth/imgWidth);
    parent.style.width=cols*imgWidth+"px";
    var imgHeight=[];
    for(var i=0;i<cols;i++){
        imgHeight.push(ccontent[i].offsetHeight);
        ccontent[i].style.left=imgWidth*i+"px";
        ccontent[i].style.top=0;
    }
    for(var i=cols;i<ccontent.length;i++){
        getHeightMin(imgHeight,ccontent,i);
    }
    check("box");
}


//得到高度最低的那张图片
function getHeightMin(imgHeight,content,col){
    var imgHeightMin=imgHeight[0],j=0;
    for(var i=0;i<imgHeight.length;i++){
        if(imgHeightMin>imgHeight[i+1]) {
            imgHeightMin = imgHeight[i + 1];
            j=i+1;
        }
    }
    var left=content[j].style.left;
    content[col].style.left=left;
    content[col].style.top=imgHeightMin+"px";
    imgHeight[j]=imgHeightMin+content[col].offsetHeight;
}

这是下拉刷新，滚动滚轮无限次刷新

//下拉刷新加载
function check(content){
    var content=document.querySelectorAll("."+content);
    var imgLast=content[content.length-1];//页面中最后一个元素
    var WinHeight=document.documentElement.clientHeight;//浏览器页面可视区的高度
    var top=imgLast.offsetTop;//最后一个元素距离页面顶部的距离
    var height=imgLast.offsetHeight;//最后一个元素的高度
    var scroll=document.body.scrollTop||document.documentElement.scrollTop;//滚动条的滚动距离
    var ImgTop=parseInt(top+height);
    if (ImgTop-scroll<=WinHeight){
        var container=document.getElementById("container");
        var imgSrc=["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg","img/14.jpg","img/15.jpg","img/16.jpg","img/17.jpg","img/18.jpg","img/19.jpg"];
        for(var i=0;i<imgSrc.length;i++){
            var box=document.createElement("div");
            box.className="box";
            var boxImg=document.createElement("div");
            boxImg.className="box_img";
            var img=new Image();
            img.src=imgSrc[i];
            boxImg.appendChild(img);
            box.appendChild(boxImg);
            container.appendChild(box);
        }
        console.log(container);
        imgLoaction("box");
    }
}

外加一张效果图