PC端瀑布流无限加载效果

最新推荐文章于 2025-08-06 15:07:27 发布

scarsun

最新推荐文章于 2025-08-06 15:07:27 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/scarsun/article/details/81328086

该博客介绍了如何创建PC端的瀑布流无限加载效果，通过data.js和index.js两个JavaScript文件来实现。data.js中包含模拟的图片数据，包括图片URL、宽度和高度等信息，可以根据实际需求定制数据。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			position: relative;
			margin: 0 auto;
		}
		#box .panel {
			position: absolute;
		}
		#box img {
			margin: 10px;
			padding: 10px;
			width: 220px;
			background: #fff;
			box-shadow: 0 0 8px #ccc;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="panel"><img src="images/1.jpg"></div>
		<div class="panel"><img src="images/2.jpg"></div>
		<div class="panel"><img src="images/3.jpg"></div>
		<div class="panel"><img src="images/4.jpg"></div>
		<div class="panel"><img src="images/5.jpg"></div>
		<div class="panel"><img src="images/6.jpg"></div>
		<div class="panel"><img src="images/7.jpg"></div>
		<div