JS 无线滚动的瀑布流

最新推荐文章于 2024-07-16 17:26:59 发布

boonyaxnn

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量222

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/boonyaxnn/article/details/89387108

版权

JavaScript 专栏收录该内容

90 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript实现无限滚动的瀑布流布局。主要内容包括HTML结构设置、CSS样式定义，以及JavaScript的关键步骤：获取页面元素、解析数据、填充数据、形成瀑布流效果，并通过判断滚动位置来实现动态加载更多内容。

摘要由CSDN通过智能技术生成

1、html代码部分

<div class="box"></div>

2、css样式部分

        * {
            margin: 0;
            padding: 0
        }
        .box {
            margin: 0 auto;
            position: relative;
        }
        img {
            margin: 20px;
            border: 1px solid skyblue;
            box-shadow: 5px 5px 20px skyblue;
            border-radius: 20px;
            padding: 20px;
        }
        .f {
            float: left;
        }

3、 js部分

（1）获取页面元素

var box = document.querySelector('.box');

（2）解析数据

 var data = JSON.parse(dataStr);

（3）填充数据

   function addImg() {
        for (var i = 0; i < data.src.length; i++) {
            var div = document.createElement('div');
            div.className = 'f';
            var img = document.createElement('img');
            img.src = 'img/' + data.src[i];
            div.appendChild(img);
            box.appendChild(div);
        }
    }

（4）形成瀑布流

   function createWall() {
        //1.获取视口的宽度
        var clientWidth = document.documentElement.clientWidth;
        //2.获取一个div的宽度
        var imgs = document.querySelectorAll('.f');
        var oneWidth = imgs[0].offsetWidth;
        //3.求出数量
        var count = Math.floor(clientWidth / oneWidth);
        //设置box的宽度  数量* 一个div的宽度
        box.style.width = count * oneWidth + 'px';
        //遍历所有的图片
        //定义数组 记录第一排图片的高度
        var heightArr = [];
        for (var i = 0; i < imgs.length; i++) {
            if (i < count) {
                heightArr.push(imgs[i].offsetHeight);
            } else {
                //0.子元素相对父元素定位
                imgs[i].style.position = 'absolute';
                //1.获取数组内最小的值
                var minValue = Math.min.apply(null, heightArr);
                //2.获取最小值的下标
                var index = heightArr.indexOf(minValue);
                //3.获取此元素 并 获取它的offsetLeft
                var left = imgs[index].offsetLeft;
                //5.为下一个元素赋值left top
                imgs[i].style.left = left + 'px';
                imgs[i].style.top = minValue + 'px';
                //6.将数组内的高度进行修改 =  当前最小值的高度 + 已经展示图片的高度
                heightArr[index] = minValue + imgs[i].offsetHeight;
            }
        }
    }
    window.onload = function () {
        createWall();
    };

（5）判断视口+滚动距离是否大于最后一个元素距父元素的高度

  function isLoadMore() {
        var clientHeight = document.documentElement.clientHeight;

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;


        var imgs = document.querySelectorAll('.f');

        var offsetTop = imgs[imgs.length - 1].offsetTop;

        //满足加载更多的条件
        if(clientHeight+scrollTop>offsetTop){
            return true;
        }
    }

（6）当文档发生滚动时，进行加载更多

   window.onscroll = function () {
       var flag =  isLoadMore();
        if(flag){
            //进入分支 可以加载更多
            addImg();
            createWall();
        }
    }