瀑布流&滚动加载数据

最新推荐文章于 2023-02-27 17:09:52 发布

M_X_B_MR_L

最新推荐文章于 2023-02-27 17:09:52 发布

阅读量145

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/M_X_B_MR_L/article/details/121480985

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>瀑布流&滚动加载数据</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .all{
                width: 976px;
                border: cornflowerblue 1px solid;
                margin: auto;
                position: relative;
            }
            .img{
                border: 1px solid burlywood;
                position: absolute;
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <div class="all">
            <div class="img">
                <img src="img/ia_100000000.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000001.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000002.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000003.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000004.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000005.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000006.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000007.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000008.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000009.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000010.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000011.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000012.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000013.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000014.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000015.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000016.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000017.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000018.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000019.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000020.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000021.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000022.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000023.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000024.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000025.jpg">
            </div>
            <div class="img">
                <img src="img/ia_100000026.jpg">
            </div>
        </div>
    </body>
</html>
<script>
    
window.onload=function(){
    var all=document.getElementsByClassName("all")[0];
    var img=document.getElementsByClassName("img");
    //获取到all的宽度
    var allW=all.offsetWidth;
    //获取到img盒子的宽度
    var imgW=img[0].offsetWidth;
    //求出列数
    var list=parseInt(allW/imgW)
    //求出间距
    var row=(allW-imgW*list)/(list-1)
     //定义一个存储列高度的容器
     var arr=[];
     
    //滚动页面时，加载数据
    window.onscroll=function(){
        if (window.pageYOffset + window.innerHeight>getMin(arr).minV) {
            var json=[
                {"src":"img/ia_100000001.jpg"},
                {"src":"img/ia_100000002.jpg"},
                {"src":"img/ia_100000003.jpg"},
                {"src":"img/ia_100000004.jpg"},
                {"src":"img/ia_100000005.jpg"},
                {"src":"img/ia_100000006.jpg"},
                {"src":"img/ia_100000007.jpg"},
                {"src":"img/ia_100000008.jpg"},
                {"src":"img/ia_100000009.jpg"},
                {"src":"img/ia_100000010.jpg"},
            ];
            for (var i = 0; i < json.length; i++) {
                var div=document.createElement("div");
                div.className="img";
                var img=document.createElement("img");
                img.src=json[i].src;
                div.appendChild(img);
                all.appendChild(div);
            }
            waterFull();
        }
    }
    //实现瀑布流的布局方法
    waterFull();

    function waterFull() {
        for (var i = 0; i < img.length; i++) {
            //第一排的图片位置
            if (i<list) {
                img[i].style.left=imgW*i+row*i+"px";
                arr[i]=img[i].offsetHeight;
                // console.log(arr)
            }
            else{
                var minV=getMin(arr).minV;
                var minI=getMin(arr).minI;

                img[i].style.left=imgW*minI+row*minI+"px";
                img[i].style.top=minV+row+"px";
                //获取此时新的高度
                arr[minI]=minV+row+img[i].offsetHeight;
            }
            
        }
    }

    //获取数组的最小值及索引
    function getMin(arr){
        var obj={}; 
        obj.minV=arr[0];
        obj.minI=0;
        for (var i = 1; i < arr.length; i++) {
            if (obj.minV>arr[i]) {
                obj.minV=arr[i];
                //获取最小值的索引
                obj.minI=i;
            }
            
        }
        return obj;
    }
   
}
</script>

运行结果
瀑布流

M_X_B_MR_L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流&滚动加载数据

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>瀑布流&滚动加载数据</title> <style>
复制链接

扫一扫