第三题小demo-瀑布流布局案例

最新推荐文章于 2023-05-25 16:25:12 发布

小黑子史蒂夫

最新推荐文章于 2023-05-25 16:25:12 发布

阅读量163

点赞数

分类专栏：前端三剑客小demo 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/VanWot/article/details/128708497

版权

前端三剑客小demo 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小黑子的瀑布流布局案例

需求：
1.多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片
2. 每次下拉显示20-30张图片。

实现原理：

首先在js中编写图片数组arr1，利用for循环对每个图片赋予li
在css中利用弹性盒子排列成6列
最后在js里利用懒加载，到底时再定时器事件触发，返回arr1设定的函数即可实现下拉

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./瀑布流布局css.css">
    <script src="./瀑布流布局js.js"></script>
</head>
<body>
    <ul id="list"></ul>
</body>
</html>

css部分

* {
    margin: 0;
    padding: 0;
  }

  html,body{
    height: 100%;
  }
  
  #list{
      width: 1400px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
  }

  ul li{
    overflow: hidden;
    border: 1px solid black;
    margin-bottom: 5px;
    height: 290px;
  }

  ul li img{
    width: 200px;
  }

js部分

window.onload = function () {
  let arr1 = [
    {
      url: "./图片/1.webp"
    },
    {

      url: "./图片/2.jpg"
    },
    {

      url: "./图片/3.webp"
    },
    {

      url: "./图片/4.webp"
    },
    {

      url: "./图片/5.webp"
    },
    {

      url: "./图片/OIP-C (1).jpg"
    },
    {

      url: "./图片/OIP-C (2).jpg"
    },
    {

      url: "./图片/OIP-C (3).jpg"
    },
    {

      url: "./图片/OIP-C.jpg"
    },
    {

      url: "./图片/OIP-C (4).jpg"
    },
    {

      url: "./图片/三鹰朝1.webp"
    },
    {

      url: "./图片/三鹰朝2.jpeg"
    },
    {

      url: "./图片/那由多1.jpg"
    },
    {

      url: "./图片/那由多2.jpg"
    },
    {

      url: "./图片/3.webp"
    },
    {

      url: "./图片/4.webp"
    },
    {

      url: "./图片/5.webp"
    },
    {

      url: "./图片/OIP-C (1).jpg"
    },
    {

      url: "./图片/OIP-C (2).jpg"
    },
    {

      url: "./图片/OIP-C (3).jpg"
    },
    {

      url: "./图片/OIP-C.jpg"
    }
  ]
  renderHTML(arr1)//函数声明都是会预读到前面，所以实际调用写在函数声明前
  function renderHTML(arr) {
    for (let i = 0; i < arr.length; i++) {//在加载数据时不出现闪动
      let oli = document.createElement("li")
      oli.innerHTML = `<img src="${arr[i].url}" alt="">`
      list.appendChild(oli)
    }
  }

  isLoading = false//用于触发到底了停止打印
  window.onscroll = function () {
    // console.log("111111")
    let listHeight = list.offsetHeight
    let listTop = list.offsetTop
    // console.log(listHeight+listTop)

    let scrollTop = document.documentElement.scrollTop ||
      document.body.scrollTop

    let windowHeight = document.documentElement.clientHeight

    if (isLoading) return
    if ((listHeight + listTop) - Math.round(windowHeight + scrollTop) < 50)//快到底时触发
    {
      console.log("到底了")
      isLoading = true

      //渲染下一个数据
      setTimeout(function () {//设置拉到底之后过段实际再加载数据
        renderHTML(arr1)
        isLoading = false//下一次到底事件再次触发
      }, 1000
      )
    }
  }
}