瀑布流原理

最新推荐文章于 2021-08-29 15:52:18 发布

seven-yang

最新推荐文章于 2021-08-29 15:52:18 发布

阅读量492

点赞数 1

分类专栏： css基础

本文链接：https://blog.csdn.net/yangyixue123/article/details/79646936

版权

css基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

瀑布流实现的原理

核心特点是定宽不定高。

适用于单页面展示对内容的页面，利用js动态改变绝对定位的位置，然后对滚动条的事件监听，加载数据。

先通过计算出一排能够容纳几列元素，然后寻找各列之中所有元素高度之和的最小者，并将新元素添加到该列上个，然后继续寻找所有列的各元素之和的最小者，继续添加到该列上，循环下去，直到所有元素可以按要求排列为止。

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      #waterfall{
        position: relative;
        margin: 0,auto;
      }
      a{
        display:block;
        width:33.33%;
        min-height:100px;
      }
      a img{
        width:90%;
        margin:5%;
      }
    </style>
</head>
<body>
    <div id="waterfall">
    </div>

    <script type="text/javascript">

     let _wh = window.innerHeight;
     let imgWidth,maxH;
     function loadImg(){
        let arr=[];
        for(let i=1;i<=20;i++){
            let str="<a><img src='pic/1("+i+").jpg'></a>";
            arr.push(str);
        }
        waterfall.innerHTML = arr.join(" ");
     }
     loadImg();
     setTimeout(function(){
        maxH=setImg(waterfall);//安排图片的位置
      },500)//可以把这里的时间去掉感受一下
     window.onscroll = function(){
        console.log(document.body.scrollTop)
        if(document.body.scrollTop+100>=maxH-_wh){
            loadImg();
            maxH = setImg(waterfall);
        };
     }

     //安排图片位置
     function setImg(waterfall){
        let imgAll = waterfall.getElementsByTagName("a");
        imgWidth = imgAll[0].clientWidth;

        let arr = [];
        for(let i=0,i=imgAll.length;i<1;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);
     }
    </script>
</body>
</html>