159 lines
5.1 KiB
HTML
159 lines
5.1 KiB
HTML
<!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> |