JS 瀑布流

最新推荐文章于 2023-03-19 19:23:07 发布

奋斗的小小骚年

最新推荐文章于 2023-03-19 19:23:07 发布

阅读量213

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41654985/article/details/79764555

版权

JavaScript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }
        .clearFloat::after
        {
            content: ".";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <script>
        /*
        *
        * 变量区域
        * */
//        瀑布流同行列数
        const LI_SUM=7;
//        右侧滚动条的宽度
        const SCROLL_WIDTH=20;
//        li容器的左右padding
        const LI_PADDING=20;
//        最小高度的列表
        var minHeightList=[];
//        外容器ul
        var ul;
//        每个li的初始的宽度是0；
        var liWidth=0;
//        图片的初始地址
        var num=1;
//        判断图片是否已经加载完成的布尔值
        var bool=false;
//        需要加载图片
        var img;

//        初始执行函数
        initView();
        /*
        *  初始化显示内容函数
        *  1、创建ul，设置ul的样式为listStyle为无，设置ul清除浮动，并且把ul放在body中
        *  2、获取li的宽度，当前页面的内容宽度-滚轮的宽度，差值除以li的个数，最后减去li左右的padding值
        *  3、循环li个数，创建li，设置li的宽度，padding，浮动，把li放到ul中
        *  4、每次循环给高度数组添加最小的初始值为0；
        *  5、加载图片
        *  6、给window增加侦听滚轮事件
        * */
        function initView() {
            ul=document.createElement("ul");
            ul.style.listStyle="none";
            ul.setAttribute("class","clearFloat");
            document.body.appendChild(ul);
            liWidth=((document.documentElement.clientWidth-SCROLL_WIDTH)/LI_SUM)-LI_PADDING;
            for(var i=0;i<LI_SUM;i++){
                var li=document.createElement("li");
                li.style.width=liWidth+"px";
                li.style.padding="0 10px";
                li.style.float="left";
//                li.style.backgroundColor=randomColor(Math.random());
                ul.appendChild(li);
                minHeightList.push(0);
            }
            loadImage();
            window.addEventListener("scroll",scrollHandler);
        }
    /*
    *  加载图片
    *  1、新建图片
    *  2、侦听图片的加载事件
    *  3、给图片设置加载的地址为初始"img/1-.jpg"
    *
    * */
        function loadImage() {
           img=new Image();
            img.addEventListener("load",loadHandler);
            img.src="img/"+num+"-.jpg";
        }
        /*
        *  设置滚轮事件函数
        * 参数  e 事件对象
        *  1、如果当前没有加载完成不执行滚轮事件函数
        *2、如果当前屏的滚动条的位置+当前一屏的高度大于了当前body内容高度时，加载新图片
        * 3、设置num初始值=1；
        * 4、设置图片的地址是这个，因为上面已经做了侦听加载事件，因此设置图片地址后，自动执行加载事件的函数
        * 上面已经做了图片的加载侦听事件，只要针对这张图更改了地址，就会调用加载函数
        * */
        function scrollHandler(e) {
            e=e || window.event;
            if(!bool) return;
            if(document.documentElement.scrollTop+document.documentElement.clientHeight>=document.body.clientHeight){
                num=1;
                img.src="img/"+num+"-.jpg";
            }
        }
        /*
        *  图片加载事件函数
        *  参数 e  事件对象
        *
        *  1、获取最小高度的索引值（先获取数值中最小的高度值，查找这个高度值在数组的哪一位）
        *  2、因为图片每次都更改地址，因此我们不能把原图片直接加载在li中，我们这里克隆了图片
        *  3、设置克隆的图片的宽度是liwidth
        *  4、把这个克隆的图片插入到ul中找到最小高度的索引对应li中
        *  5、让这个最小高度数组中当前索引的高度加当前图片的高度
        *  6、继续加载新的图片，如果图片数量大于79，停止加载，加载完成
        *  这里使用return返回跳出函数，不再执行src的赋值，所以不再加载新图片
        * */
        function loadHandler(e) {
            e=e || window.event;
            var minIndex=minHeightList.indexOf(Math.min.apply(null,minHeightList));
            var images=this.cloneNode(false);
            images.style.width=liWidth+"px";
            ul.children[minIndex].appendChild(images);
            minHeightList[minIndex]+=images.clientHeight;
            num++;
            if(num>79){
                bool=true;
                return;
            }
            this.src="img/"+num+"-.jpg";
        }


        function randomColor(alpha) {
            var col="rgba(";
            if(!alpha && alpha!==0){
                alpha=1;
            }
            for(var i=0;i<3;i++){
                col+=Math.floor(Math.random()*256)+",";
            }
            col+=alpha+")";
            return col
        }
    </script>
</body>
</html>