PC端瀑布流无限加载效果

最新推荐文章于 2020-12-19 19:47:24 发布

原创

最新推荐文章于 2020-12-19 19:47:24 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

该博客介绍了如何创建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