利用渲染制作瀑布流

最新推荐文章于 2024-09-11 20:31:47 发布

我是打工人

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量160

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/szydqq/article/details/123332653

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body > div {
      width: 1200px;
      margin: 0 auto;
      background-color: skyblue;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      font-size: 60px;
    }

    .footer {
      height: 600px;
    }

    ul, li {
      list-style: none;
    }

    ul {
      width: 1200px;
      margin: 10px auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    li {
      width: 295px;
      border: 1px solid #333;
      height: 510px;
      margin-bottom: 10px;
      box-sizing: border-box;
      padding: 8px;
    }

    img {
      width: 280px;
      height: 350px;
      display: block;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
    }

    .loading {
      height: 400px;
      background-color: #fff;
      margin: 5px auto;
      display: none;
    }

    .loading.active {
      display: block;
    }

    .loading > img {
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
</head>
<body>

  <div class="header">网页头部</div>
  <ul>
    <!-- JS 渲染 -->
  </ul>
  <div class="loading">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bcf8595f6ff6a8012193a3c200bd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648872144&t=43a735f21dee9b39b2ca15ef2d3725fc" alt="">
  </div>
  <div class="footer">网页底部</div>

  <script src="./dm_list.js"></script>
  <script>
    /*
      案例 - 瀑布流

      需求:
        + 在一个合适的时机, current++, 从新渲染

      问题: 什么是合适的时机 ?
        + ul 盒子的底边进入页面的时候就是合适的时机
      问题: 如何判断 ul 的底边进入页面了 ?
        + 浏览器卷去的高度 + 可视窗口高度 >= 盒子的上方偏移量 + 盒子的高度
    */

    // 0. 获取元素
    var listBox = document.querySelector('ul')
    var loadingBox = document.querySelector('.loading')

    // 1. 基础页面渲染
    var current = 1
    var pagesize = 8
    var total = Math.ceil(list.length / pagesize)
    // 开关
    var flag = true

    // 1-2. 准备渲染的函数
    bindHtml()
    function bindHtml() {
      // 1-2-1. 截取数组
      var bindList = list.slice((current - 1) * pagesize, current * pagesize)

      // 1-2-2. 渲染页面
      // 因为是 瀑布流, 需要的是叠加
      // 因为你写了 +=, 不会覆盖原先的任何内容, 保证你的 listBox 一开始不要有内容
      listBox.innerHTML += bindList.reduce(function (prev, item) {
        return prev + `
          <li>
            <img src="${ item.pic }" alt="">
            <div class="info">
              <p>${ item.name }</p>
              <p>地址: ${ item.address }</p>
              <p>城市: ${ item.city }</p>
              <p>价格: ${ item.price }</p>
              <p>演出时间: ${ item.showTime }</p>
            </div>
          </li>
        `
      }, '')
    }



    // 2. 准备加载下一页
    window.onscroll = function () {
      // 2-1. 判断什么情况不加载
      if (current >= total) return

      // 2-2. 判断没有达到指定位置的时候, 不加载
      var window_height = document.documentElement.clientHeight
      var scroll_top = document.documentElement.scrollTop || document.body.scrollTop
      var ul_top = listBox.offsetTop
      var ul_height = listBox.offsetHeight
      if (window_height + scroll_top < ul_top + ul_height) return

       // 判断开关
       if (!flag) return

      // 2-3. 让 loading 出现
      loadingBox.classList.add('active')

      // 代码能执行到这里, 说明开关是开启的, 我们需要关闭
      flag = false

      // 2-4. 使用 setTimeout 定时器模拟网络加载过程
      setTimeout(function () {
        // 实现加载的代码
        current++
        bindHtml()

        // 让 loading 效果消失
        loadingBox.classList.remove('active')

        // 把开关打开
        flag = true

      }, Math.floor(Math.random() * (5000 - 2000 + 1) + 2000))

    }

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