瀑布流3

最新推荐文章于 2024-07-04 12:59:33 发布
N_ora
最新推荐文章于 2024-07-04 12:59:33 发布
阅读量50
点赞数
本文链接：https://blog.csdn.net/qq_33359745/article/details/106884271
版权
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    </style>
</head>
<body>
<script>
    // 思路： 先实现ul  col 个li  预加载每一张图片， 加载后将图片添加到对应的li 修改存储高度的数组，继续加载下一张图片
    // document.documentElement.clientWidth 获取的值是 经过四舍五入后的值
    let ul;
    let bodyWidth;
    const col = 5;
    const GAP = 5;
    let heightlist = [];
    // 最小图片 
    let num = 2;
    // 最大图片
    const MAX = 79;
    init()
    function init() {
        ul = document.createElement('ul');
        Object.assign(ul.style,{
            margin:'0px',
            fontSize:'0px',
            padding:'0px',
            listStyle:'none',
            width:'100%',
        })
        for(let i =0;i<col;i++){
            let li = document.createElement('li');
            Object.assign(li.style,{
                width:(document.documentElement.clientWidth-1-(col-1)*GAP)/col+'px',
                // height:'2000px',
                marginLeft:i===0?0:GAP+'px',
                float:'left',
                // backgroundColor:'red',
            })
            ul.appendChild(li);
            // 初始值为0；
            heightlist.push(0);
        }
        document.body.appendChild(ul);
        resizeHandler();
        window.addEventListener('resize',resizeHandler);
        // 新增
        window.addEventListener('scroll',scrollHandler);
        // 加载图片，一个加载完在加载一个新的
        loadImage('./img/'+num+'-.jpg');
    }
    // 当 满足条件 继续加载
    function  scrollHandler(e) {
        if((document.body.scrollHeight-document.documentElement.scrollTop) < 2*document.documentElement.clientHeight){
            loadImage('./img/'+num+'-.jpg');
        }
    }
    // function loadHandler(src){
        // 加载完后 就会执行then 方法
        // loadImage(src).then((img)=>{
        //     let min = Math.min.apply(null,heightlist);
        //     let idx = heightlist.indexOf(min);
        //     ul.children[idx].appendChild(img);
        //     img.style.width = '100%';
        //     img.style.marginBottom = GAP +'px';
        //     // 一开始没有滚动条，后面滚动条出现，宽度改变
        //     // 每次加载完图片之后，要判断当前宽度是否改变，如果改变则重新改变宽度；
        //     if(document.documentElement.clientWidth !== bodyWidth){
        //         resizeHandler();
        //     }
        //     heightlist[idx] += (img.height+GAP);
        //     num++;
        //     if(num>MAX)return;
        //     loadHandler('./img/'+num+'-.jpg');
        // })
    // }
    // function  loadImage(src) {
    //    return new Promise((res,rej)=>{
    //        let img = new Image();
    //        img.src = src;
    //        img.onload = function () {
    //             res(img);
    //        }
    //    })
    // }
    function loadImage(src) {
        let img = new Image();
        img.addEventListener('load',loadHandler);
        img.src = src;
    }
    function loadHandler(e) {
        // 加载后，找到数组中的最小值，及最小值的索引，然后将img添加到对应索引li上，并且修改数组的高度；
        let min = Math.min.apply(null,heightlist);
        let idx = heightlist.indexOf(min);
        // 设置宽 及marginBottom
        this.style.width = '100%';
        this.style.marginBottom = GAP+'px';
        ul.children[idx].appendChild(this);
        if(document.documentElement.clientWidth !== bodyWidth){
            resizeHandler();
        }
        // 图片高度：img.height + marginBottom;
        heightlist[idx] += (this.height+GAP);
        // 继续加载下一张
        num++;
        // 当num的值大于MAX时，重新赋值
        if(num>MAX) num=2;
        // 当满足条件时 停止加载
        if(document.body.scrollHeight>2*document.documentElement.clientHeight) return;
        loadImage('./img/'+num+'-.jpg');
    }
    // function loadHandler(e) {
    //     // 加载后，找到数组中的最小值，及最小值的索引，然后将img添加到对应索引li上，并且修改数组的高度；
    //     let min = Math.min.apply(null,heightlist);
    //     let idx = heightlist.indexOf(min);
    //     // 设置宽 及marginBottom
    //     this.style.width = '100%';
    //     this.style.marginBottom = GAP+'px';
    //     ul.children[idx].appendChild(this);
    // if(document.documentElement.clientWidth !== bodyWidth){
    //     resizeHandler();
    // }
    //     // 图片高度：img.height + marginBottom;
    //     heightlist[idx] += (this.height+GAP);
    //     // 继续加载下一张
    //     num++;
    //     // 当num的值大于MAX时，退出
    //     if(num>MAX) return;
    //     loadImage('./img/'+num+'-.jpg');
    // }
    function resizeHandler(e) {
        bodyWidth = document.documentElement.clientWidth;
        for(let i =0;i<ul.children.length;i++){
            ul.children[i].style.width = (document.documentElement.clientWidth-1-(col-1)*GAP)/col+'px';
        }
    }

</script>
</body>
</html>