瀑布流加载数据。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }

        .content > div {
    
    
            position: relative;
            width: 300px;
            height: 250px;
            box-shadow: 0 0 5px #000;
        }

        .content > div > div {
    
    
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 250px;
            background: url("./img/bg.png") center top no-repeat;
            background-size: cover;
        }

        img {
    
    
            width: 300px;
            height: 250px;
        }
    </style>
    </head>
<body>
<div class="content">

</div>
<script>
    /*
     * 数据瀑布流加载 使用时滑动事件
     * */
    var content = document.getElementsByClassName("content")[0];
    var data = [
        {
    
    src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2005235653,1742582269&fm=26&gp=0.jpg'},
        {
    
    src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1857771108,984160923&fm=26&gp=0.jpg'},
        {
    
    src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2960427566,1786143065&fm=26&gp=0.jpg'},
        {
    
    src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1731472669,4215674773&fm=26&gp=0.jpg'},
        {
    
    src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1727914444,3729344997&fm=26&gp=0.jpg'},
        {
    
    src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2481321790,3127612340&fm=26&gp=0.jpg'},
        {
    
    src: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1262655631,4054846463&fm=26&gp=0.jpg'},
        {
    
    src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=146893042,4244628931&fm=26&gp=0.jpg'},
        {
    
    src: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1522015854,2481348088&fm=26&gp=0.jpg'},
        {
    
    src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3252747978,4060371130&fm=26&gp=0.jpg'},
    ];
    //滚动事件
    var scroll = {
    
    
        pageNum: 4,//每一页的数量
        nowpage: 1,//当前页
        totlepage: Math.ceil(data.length / this.pageNum),//总页数=总数量÷每一页的数量
        nowpageData: null,
        getNextData: function () {
    
    
            //获取下一页数据的方法。下一页数据为：从[当前页数-1（即上一页的页数）*每一页的数量](即前面的总数量)到当前页的结束
            this.nowpageData = data.slice((this.nowpage - 1) * this.pageNum, this.nowpage * this.pageNum);
            this.render();
        },
        render: function () {
    
    
        //渲染到界面的方法
            //遍历数据
            for (var i = 0; i < this.nowpageData.length; i++) {
    
    
                var box = document.createElement("div");
                var ceng = document.createElement("div");
                var image = new Image();
                image.src = this.nowpageData[i].src;
                //图片加载事件
                image.onload = function () {
    
    
                    var that = this;
                    that.previousSibling.remove();
                }
                box.appendChild(ceng);
                box.appendChild(image);
                content.appendChild(box);
            }
        }
    };
    window.onload = function () {
    
    
        scroll.getNextData();
    }
    document.body.onscroll = function (e) {
    
    
        //滚动条触底 触发一次
        //this.scrollY  也是上滑距
        //this.innerHeight  window可是区域的高
        if (this.scrollY + this.innerHeight >= document.body.clientHeight - 1) {
    
    
            //获取当前页的一次数据  渲染一次
            scroll.nowpage++;
            scroll.getNextData();
        }
    }
</script>
</body>
</html>
瀑布流加载数据。

猜你喜欢
