瀑布流+图片懒加载

╰+哭是因爲堅強的太久メ 2021-10-23 11:26 578阅读 0赞

###### 1. 图片瀑布流 ######

###### 效果图 ######

![在这里插入图片描述][20190814175900340.gif]

> 步骤：  
> ① 创建50张图片对象  
> ② 给50张图片设置定位位置  
> ③ ①和②不能写到一个函数中，否则无法获得对象的`offsetHeight`/`offsetTop`属性  
> ④ 考虑到浏览器兼容问题，需要将设置定位位置写到`window.onload= function(){}`中（火狐浏览器在页面加载完成后才能获取到`offsetHeight`/`offsetTop`属性）  
> ⑤ 在绑定一个向下滚动事件前需要计算父容器的高度(只需计算整个页面的最后一行图片对象距离顶部的高以及自身的高的和)：父容器中所有元素都绝对定位了，若不给父元素设置高度，则body.height为0，若body.height为0，则无法控制触发页面滚动事件的条件（无法在距离底部一定高度时触发页面滚动事件）。  
> ⑥ 绑定页面滚动事件：规定距离最底部20px时触发页面滚动事件。页面滚动事件为：再创建50张图片对象，再设置新的图片对象的定位位置，最后获取最新的父容器的高  
> ⑦ 绑定页面伸缩事件`window.onresize=function(){}`：当页面小于900px时，父容器的宽度变为540px，每一行放5张图片。由于每一行所能放置的图片对象的个数发生改变，故需要对所有图片重新计算其定位位置。当页面大于等于900px时，父容器宽度变为1090px，此时也需要重新计算每个图片对象的定位位置。

###### 完整代码： ######

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> body{ background: #999; } *{ margin: 0; padding:0; } .all{ border:1px solid black; background-color: #fff; width: 1090px; margin: auto; font-size: 0; position: relative; } .smallimg { position: absolute; width: 100px; } </style>
    </head>
    <body>
    <div class="all">
    
    </div>
    <script> var img = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg"]; var all = document.getElementsByClassName("all")[0]; var num = 10; var total = 50; //初始创建50张图片 createEle(total); window.onload = function (ev) { //给50张图片设置定位 setPosition(0) //获取页面的高并赋值 var maxHeight = getMaxHeight(total); all.style.height = maxHeight+"px"; } function createEle(newTotal) { //创建对象函数 for(var i=newTotal-50;i<newTotal;i++){ var image = document.createElement("img"); image.src = "img/"+img[Math.floor((Math.random()*num))]; image.setAttribute("class","smallimg");//image.className = "smalling" all.appendChild(image); } } window.onresize = function(){ //页面伸缩事件 if(document.documentElement.clientWidth<=900){ num=5; all.style.width = "540px"; } else{ num=10; all.style.width = "1090px"; } setPosition(0) } function setPosition(start) { //设置图片定位函数 for(var i=start;i<all.children.length;i++){ console.log(all.children[i].offsetHeight+"...."); all.children[i].style.left = ((i%num)*110)+"px"; if(i>=num){ all.children[i].style.top = (all.children[(i-num)].offsetHeight+10+all.children[(i-num)].offsetTop)+"px"; } else{ all.children[i].style.top= "0px"; } } } function getMaxHeight(newTotal) { //在创建完所有图片后获取all的最后十个子元素，并比较其自身高与距离顶部的高 var max=0 for(var i=newTotal-10;i<newTotal;i++){ var temp = all.children[i].offsetTop+all.children[i].offsetHeight if(temp>max){ max = temp } } console.log(max) return max } this.addEventListener("scroll",function (evt) { if(document.documentElement.clientHeight+this.scrollY>=document.body.offsetHeight-20){ total = total+50; createEle(total); setPosition(total-50) all.style.height = getMaxHeight(total)+"px"; } }) </script>
    </body>
    </html>

###### 上述案例的知识点： ######

###### ① `document.documentElement.clientHeight`：浏览器距离底部的高度 ######

###### ② `document.documentElement.clientWidth`：浏览器距离浏览器最右边的宽度 ######

###### ③ `document.documentElement.scrollTop`：当有滚动轴时，为html向下滚动的距离 ######

###### ④ `document.body.offsetHeight`：当前body的高，与body的元素的高有关 ######

###### ⑤ `对象.offsetTop`：该对象距离浏览器最顶部的距离 ######

###### ⑥ `对象.offsetHeight`：内容高（内容+水平滚动条高）+边框高+内间距高 ######

###### ⑦ `对象.scrollTop`：该对象向下滚动的距离 ######

###### ⑧ `window.scrollY`：页面向下滚动的距离（和③值相同） ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]

[20190814175900340.gif]: /images/20211023/4dafaa6a71b0441da25145e580649a9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: /images/20211023/55f3c5090ee54ce8885a9496c8c99c44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20211023/2c618a1649884f48bd7319d7934cb8e1.png