HTml+js+css 实现浏览器图片的瀑布流

最新推荐文章于 2024-07-27 23:01:21 发布

1119597068

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量512

点赞数 1

分类专栏：前端JS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_31687191/article/details/104874204

版权

这篇博客介绍了如何结合HTML、JavaScript和CSS技术，实现一个动态的网页版相册，通过图片瀑布流展示。用户可以将图片放入指定文件夹，利用JS遍历或递归方式加载图片，达到展示效果。

摘要由CSDN通过智能技术生成

可以将照片文件放入images里实现功能，也可以通过遍历字典或者函数递归的方法将所有图片导入做成网页版的相册！
实现文件结构：
在这里插入图片描述
htmlL部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<div id="main">
    <div class="box">
        <div class="pic"><img src="images/1.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/2.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/3.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/4.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/5.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/6.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class="pic"><img src="images/7.jpg" alt=""></div>
    </div>
    <div class="box">
        <div class