瀑布流

最新推荐文章于 2024-07-28 09:45:00 发布

qq_43654645

最新推荐文章于 2024-07-28 09:45:00 发布

阅读量88

点赞数

文章标签：瀑布流

本文链接：https://blog.csdn.net/qq_43654645/article/details/83903813

版权

瀑布流

Title

</ul>
<script>
    var ul,img;
    var position=3;//引用路径从三开始的
    var heightList=[];
    //图片的宽度为5张
    const NUM=5;
    init();
    function init() {
        ul=document.querySelector("ul")
        //创建for循环的
        for (var i = 0; i < NUM; i++) {
            //建立li元素
            var li = document.createElement("li");
            //li向左浮动
            li.style.float = "left";
            //每张照片的宽度等于页面的宽减去num*18(18因为给他添加了每张照片向左，乘以18在一行排列)
            li.style.width = (document.documentElement.clientWidth - 18 * NUM) / NUM + "px";
            li.style.marginLeft = "10px";
            li.style.border = "1px solid #000000";
            heightList.push(0);
            ul.appendChild(li);

    }
        img=new Image();
        img.addEventListener("load",loadHandler);
        img.src="img/"+position+"-.jpg";    //每张图片的位置

        document.addEventListener("scroll",scrollHandler); //添加滚轮时间的侦听
    }

    function loadHandler(e) {

// 将加载进来的图片复制一个新的
var imgs=this.cloneNode(false);
// 获取当前数组中所有最小的那个元素所在的下标
var index=getMinHeightIndex();
// 在ul中找到子项li是上面下标对象li，并且添加图片
ul.children[index].appendChild(imgs);
// 设置这个图片的宽度，是图片的父级（li）的宽度
imgs.style.width=imgs.parentElement.offsetWidth+“px”;
// 把这个li现在的高度设置给数组中对应的那个数
heightList[index]=imgs.parentElement.offsetHeight;

        position++;
        if(position>79){
            position=3;
      //      return;
        }
        //生成的平数
        if((document.documentElement.scrollHeight-document.documentElement.scrollTop)/document.documentElement.clientHeight>4){
            return;
        }
        this.src="img/"+position+"-.jpg";
    }

    function scrollHandler(e) {
        if((document.documentElement.scrollHeight-document.documentElement.scrollTop)/document.documentElement.clientHeight<2){
            position++;
            if(position>79){
                 position=3;
         //       return;
            }
            img.src="img/"+position+"-.jpg";
        }
    }

    function getMinHeightIndex() {
        var min=Math.min.apply(null,heightList);
        return heightList.indexOf(min);
    }
</script>