From 4c210cb365a016d53d0714fb30f2b1964c6286df Mon Sep 17 00:00:00 2001
From: yigencong <yigencong@yahoo.com>
Date: Sat, 20 Apr 2024 03:02:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=A4=E6=96=ADdom=E6=98=AF=E5=90=A6?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=88=B0=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html/滑动加载.html     | 159 +++++++++++++++++++++++++++++++++++++++++
 html/滑动底部判断.html |  36 ++++++++++
 2 files changed, 195 insertions(+)
 create mode 100644 html/滑动加载.html
 create mode 100644 html/滑动底部判断.html
diff --git a/html/滑动加载.html b/html/滑动加载.html
new file mode 100644
index 0000000..91b45a2
--- /dev/null
+++ b/html/滑动加载.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    ul, li {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    li {
+      display: flex;
+      border: pink 1px solid;
+      margin-bottom: 5px;
+    }
+    li .avatar {
+      height: 100px;
+      width: 100px;
+      flex-basis: 100px;
+    }
+    li .content {
+      line-height: 100px;
+      text-align:  center;
+      flex: 1;
+    }
+
+    /* 全屏幕覆盖的加载动画 */
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8); /* 白色半透明背景 */
+  z-index: 9999; /* 确保在最顶层 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 加载动画样式 */
+.loader::after {
+  content: '';
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 5px solid #333; /* 黑色边框 */
+  border-top: 5px solid #fff; /* 白色顶部边框 */
+  animation: spin 1s linear infinite; /* 旋转动画 */
+}
+
+/* 旋转动画 */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 其他页面内容样式 */
+.content {
+  /* 添加你的内容样式 */
+}
+
+  </style>
+</head>
+<body>
+  <ul id="list"></ul>
+  <div class="loader" style="visibility:hidden;"></div>
+  <script>
+    let data = [
+      {
+        avatar: '/upload/b178e0eaa1516fe27b3babd932aa37cc80b17472.jpg@942w_930h_progressive.jpeg',
+        content: '我是皮特，我是圆蛤镇的一位出生，哈哈哈哈哈'
+      },
+      {
+        avatar: '/upload/f892d57fedb12065c2b1379eb6f193ab91e9b364.jpg@942w_936h_progressive.jpeg',
+        content: '我是路易斯老妈，我是圆蛤镇的一位出生，哈哈哈哈哈'
+      },
+      {
+        avatar: '/upload/710827654220b2e2418aa9b24838974ea8b0f9fd.jpg@942w_921h_progressive.jpeg',
+        content: '我是亚裔新闻记者，我是圆蛤镇的一位出生，哈哈哈哈哈'
+      },
+      {
+        avatar: '/upload/8e5e9700d916e69f69c79cdb5f525d67ee9a3f0d.jpg@942w_927h_progressive.jpeg',
+        content: '我是饺子，我是圆蛤镇的一位出生，哈哈哈哈哈'
+      },
+      {
+        avatar: '/upload/39ab275203860c6fdfaa58d061cc262c7618a459.jpg@942w_923h_progressive.jpeg',
+        content: '我是圆蛤镇的一位出生，哈哈哈哈哈'
+      },
+      {
+        avatar: '/upload/c73b288188420cdc89ab913975fee837c79a058f.jpg@942w_927h_progressive.jpeg',
+        content: 'shut up！ meg'
+      },
+      {
+        avatar: '/upload/5045ae78e674c40f0f295fdac12b6a9e7a11cce1.jpg@942w_920h_progressive.jpeg',
+        content: '我是一只鸡，我是圆蛤镇的一位出生，哈哈哈哈哈'
+      },
+      {
+        avatar: '/upload/08e724093b3384d5b5186919a03caaa7b2b0d276.jpg@942w_933h_progressive.jpeg',
+        content: '我是Lois老爸，我是圆蛤镇的一位出生，哈哈哈哈哈'
+      },
+      {
+        avatar: '/upload/6f69059fc87968768f9ea38659b9c194700b4b0b.jpg@942w_924h_progressive.jpeg',
+        content: '我是chrim，我爱🦌管'
+      },
+      {
+        avatar: '/upload/65f2d1791026a08c58d544628b4745513c013b78.jpg@942w_924h_progressive.jpeg',
+        content: '我是上帝，我是圆蛤镇的一位出生，哈哈哈哈哈'
+      }
+    ]
+
+    // 获取dom
+    let list = document.querySelector("#list")
+    // 渲染函数，把提供的数据追加到后面
+    function renderList(data) {
+      data.forEach(item => {
+        // 创建li标签，往li标签里面添加内容，然后依次追加到list中去
+        let li = document.createElement('li');
+        li.innerHTML = `<img class="avatar" src="${item.avatar}" alt="">
+      <div class="content">${item.content}</div>`
+      list.appendChild(li)
+      });
+    }
+
+    // 初始化渲染
+    renderList(data.map(item=>({...item, avatar: 'https://blog.icoding.fun' + item.avatar})))
+  
+    /*
+     在JavaScript中，你可以使用 scroll 事件来监听滚动，并结合一些属性来判断是否滑动
+     到了页面底部。一个常用的方法是检查scrollTop 和 clientHeight 属性与 scrollHeight 属性的关系。
+     当 scrollTop + clientHeight 等于 scrollHeight 时，表示页面已经滚动到了底部。
+     */
+    let flag = false // 是否已经到底
+    let loader = document.querySelector(".loader")
+    new Promise((resove)=>{ // 如果直接监听会导致dom刷新时触发scroll事件，所以等加载完成之后再监听
+      window.onload = function(){
+        resove(1)
+      }
+    }).then((res)=>{
+      window.addEventListener('scroll', function(){
+      if(flag) return
+      if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
+        flag = true
+        // 追加新的数据
+        loader.style.visibility = "visible"
+        setTimeout(() => {
+          let nData = data.sort(()=>Math.random() - 0.5) // 打乱数组
+          renderList(data.map(item=>({...item, avatar: 'https://blog.icoding.fun' + item.avatar})))
+          flag = false
+          loader.style.visibility = "hidden"
+        }, 1000);
+      }
+    })
+    })
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/滑动底部判断.html b/html/滑动底部判断.html
new file mode 100644
index 0000000..ae577b9
--- /dev/null
+++ b/html/滑动底部判断.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .parent {
+      height: 300px;
+      background-color: aquamarine;
+      overflow: scroll;
+    }
+    .son {
+      height: 1000px;
+      width: 80%;
+      margin: 0 auto;
+      background: linear-gradient(to bottom, #ff0000, #00ff00); /* 从上到下的颜色渐变 */
+    }
+  </style>
+</head>
+<body>
+  <div class="parent">
+    <div class="son"></div>
+  </div>
+  <script>
+    let parent = document.querySelector(".parent")
+    let son = document.querySelector(".son")
+    // 元素的ScrollTop(卷上去的高度) + clientHeight (元素盒子模型的内容高度 content + padding) >= scrollHeight(元素能滚动的高度)
+    parent.onscroll = function(){
+      if (parent.scrollTop + parent.clientHeight > parent.scrollHeight - 10) {
+        alert("到底部了")
+      }
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
