原生js简写瀑布流布局（已抽象）

最新推荐文章于 2024-05-27 22:56:36 发布

置顶说好的精彩呢

最新推荐文章于 2024-05-27 22:56:36 发布

阅读量147

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： '

本文链接：https://blog.youkuaiyun.com/weixin_41634144/article/details/84337696

js 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了瀑布流布局的原理与特点，包括图片宽度固定、高度动态变化的特性，以及通过比较列高来最小化高度误差的渲染策略。介绍了瀑布流布局的实现过程，从初始化列布局到动态加载图片，再到优化DOM资源使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

瀑布流原理及特点

1.瀑布流的特点是图片的宽度固定，图片的长度不一样。其次，是当页面滚动时或以其他方法请求数据后，会再次加载数据，动态的渲染在页面上。

2.瀑布流的原理(以图片为例)

（1）获取页面的可见宽度 var wid = document.body.clientWidth;

（2）创建宽度相等的x个列，当第一批图片渲染后根据图片的高度的不同，渲染第二批imgData，

注：再次渲染时，优先将图片插入列高最短的那一列

第一次渲染结果：共八列，每列下有n个div 用于存放n张图片，列宽相等，列高取决于内联的img高度

成品图

前期代码，整合资源，设置必要的参数

var  imgData=[                   //自定义 收到的简化数据格式
    {
        src:'P_05.jpg',
    },
    {
        src:'P_00.jpg',
    },{
        src:'P_01.jpg',
    },{
        src:'P_03.jpg',
    },{
        src:'P_04.jpg',
    },{
        src:'P_017.jpg',
    },{
        src:'P_08.jpg',
    },{
        src:'P_02.jpg',
    },]
var wid = document.body.clientWidth; //屏幕可见宽
var container =document.getElementById('container'); //容器
var start =new waterFall(); //瀑布流类的实例
start.creatClunms(wid,container);
window.onload=function(){
    start.imgLoading(imgData,container);
}
function handleBtn(){    // 第二次加载，这里没有用下拉加载，点击按钮加载
    var imgDataLoading=[
        {
            src:'P_00.jpg',
        },{
            src:'P_01.jpg',
        },{
            src:'P_03.jpg',
        },{
            src:'P_04.jpg',
        },{
            src:'P_017.jpg',
        },{
            src:'P_08.jpg',
        },{
            src:'P_02.jpg',
        },{
            src:'P_05.jpg',
        },]
        start.imgLoading(imgDataLoading,container); //收到数据后执行函数
}

核心代码

单项比对已经渲染好的那一列的高度，并没有计算新数据的图片高度，所以为保证各个列之间高度差距最小，每一列数据要渲染n次

数据：【n】

计算列高-----渲染-------数据【n-1】--------计算渲染后列高-------渲染-------数据【n-1】.。。。。。。。。。。。

缺点：过度消耗dom资源

优点：高度间误差小

function waterFall(){
   this.creatChildNode = function (data){  // 载入第一次数据时候，创建每一列下的子div和img节点，并挂载在该列下
        for(i in data){
           var childDiv= document.getElementById(i);
        //    var zhang =document.getElementById
           var div = document.createElement('div');
           var img =document.createElement('img');
           img.src=`./img/${data[i].src}`;
           div.appendChild(img)
           childDiv.appendChild(div);
        }
    },
   this.creatClunms= function(wid,container){  // 根据屏幕宽度创建每一列，及其样式
    var len = imgData.length;
    for(i in imgData){
        var div = document.createElement('div');
        div.style.width=`${wid/len}px`;
        div.style.height='100%';
        div.style.display='inline-block';
        div.id=i;
        div.className='clunms';
        container.appendChild(div);
    }
    },
   this.imgLoading=function (data,container){ //渲染
        if(container.offsetHeight!==0){     //判断是否进行了第一次 数据渲染
            var clu= document.getElementsByClassName('clunms');
            var min = 9999;
            var num = 0;
            for( var i=0 ;i<8;i++){
                console.log(clu[i].offsetHeight);
                if(clu[i].offsetHeight<min){
                    min=clu[i].offsetHeight;
                    num = i;
                }
            }//比对出 当前高度最小的那一列，然后进行append
            var childDiv = document.getElementById(num);
            var div =document.createElement("div");
            var img = document.createElement('img');
            img.src= `./img/${data[0].src}`;
            div.append(img);
            data.splice(0,1); //将已经append到列中的数据从数据源删除
            childDiv.appendChild(div);
            if(data.length!==0){
                this.imgLoading(data,container); //递归，直到第n次的数据已经全部渲染到页面上
            }
            else{
                return;
            }
        }else{
            this.creatChildNode(data);  //进行第一次数据渲染
        }
    }
}

css 部分

.container{
	background-color: aquamarine;
	display: flex;
}

img资源部分，存放一些图片

原创：https://blog.youkuaiyun.com/sjy2549957048/article/details/80586773

很多瀑布流的特殊效果还没实现，这只是整理出来的一个简单版本，欢迎各位大神指导