原生js实现瀑布流

最新推荐文章于 2022-09-10 23:12:25 发布

孤独的小色狼

最新推荐文章于 2022-09-10 23:12:25 发布

阅读量128

点赞数

分类专栏：原生js 文章标签：瀑布流

本文链接：https://blog.csdn.net/qq_36864205/article/details/85177884

版权

原生js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

思路：定义全局变量minHeightList数组，用来存放li的高度，定义变量num，遍历图片地址，常量COL，定义有几列图片，定义bodyWidth，用来比对窗口发生变化

1、定义获取li最小高度函数，返回最小高度li的索引及最小高度的li，

2、预加载图片，加载完一张就向放到获取的最小高度的li中，同时更新存放li高度的数组。

3、监听窗口变化，当窗口发生变化时，遍历改变ul,li,img的宽度.

编程过程中遇到的问题，

var minHeight=Math.min.apply(null,minHeightLi)
获取最小高度时将最小高度当成了最小高度的索引

minHeightLi[obj.index]=obj.li.offsetHeight
更新把图片放到获取的最小高度li的高度时，写成了obj.li.clientWidth//粗心。

未写出来部分，窗口监听那一块，窗口改变是，不仅要遍历改变ul,li,img的宽度，还要更新存放li高度的数组。
每次加载图片是都要监听判断当前的窗口宽度是否等于之前的窗口宽度，如果不等就运行窗口监听函数。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <script src="../universalMethod.js"></script>
</head>
<body>
<script>
    var ul,margin=5
    const LIST=5
    var minHeightLi=[]
    var num=2
    var bodyWidth
    init()
    function init(){
        ul=Method.createElem("ul",document.body,{
            width:document.body.clientWidth+"px",
            margin:0,
            padding:0,
        })
        for(var i=0;i<LIST;i++){
            var li=Method.createElem("li",ul,{
                float:"left",
                listStyle:"none",
                width:document.body.clientWidth/LIST-margin+"px",
                marginLeft:i===0 ? 0 : margin+"px",

            })
            li.index=i
            console.log(li.index)
            minHeightLi.push(0)
        }
        window.addEventListener("resize",resizeHandler)
        createImg()

    }
    function createImg(){
      var img=Method.createElem("img",null,{
          width:document.body.clientWidth/LIST-margin+"px"
      })
        img.src="img2/2-.jpg"
        img.addEventListener("load",loadHandler)
    }

    function loadHandler(){
        var obj=getMinHeightLi()
        var imgClone=this.cloneNode(false)
        obj.li.appendChild(imgClone)
        if(document.body.clientWidth!==bodyWidth){
            bodyWidth=document.body.clientWidth
            resizeHandler()
        }
        minHeightLi[obj.index]=obj.li.offsetHeight
        num++
        if(num>79){
            this.removeEventListener("load",loadHandler)
            return
        }
        this.src="img2/"+num+"-.jpg"
    }

    function resizeHandler(){
        var width=document.body.clientWidth/LIST-margin+"px";
            ul.style.width=document.body.clientWidth
            for(var i=0;i<LIST;i++){
                ul.children[i].style.width=width
                for(var j=0;j<ul.children[i].children.length;j++){
                    ul.children[i].children[j].style.width=width
                }
                minHeightLi[i]=ul.children[i].offsetHeight
            }
    }

    function getMinHeightLi(){
        var minHeight=Math.min.apply(null,minHeightLi)
        var index=minHeightLi.indexOf(minHeight)
        var li=ul.children[index]
        console.log(li.index)
        return {index:index,li:li,}
    }

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

孤独的小色狼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现瀑布流

思路：定义全局变量minHeightList数组，用来存放li的高度，定义变量num，遍历图片地址，常量COL，定义有几列图片，定义bodyWidth，用来比对窗口发生变化1、定义获取li最小高度函数，返回最小高度li的索引及最小高度的li，2、预加载图片，加载完一张就向放到获取的最小高度的li中，同时更新存放li高度的数组。3、监听窗口变化，当窗口发生变化时，遍历改变ul,li,im...
复制链接

扫一扫

专栏目录