js--实现图片瀑布流

最新推荐文章于 2024-01-20 15:45:35 发布

等待戈多的莱昂纳多

最新推荐文章于 2024-01-20 15:45:35 发布

阅读量187

点赞数 1

分类专栏：前端基础。

本文链接：https://blog.csdn.net/weixin_44892520/article/details/98655475

版权

本文详细介绍了如何使用JavaScript来实现图片的瀑布流布局，通过调整元素的宽高比和布局方式，创建出视觉效果良好的动态加载效果。内容包括关键代码示例和实现步骤。

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

代码：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #ededed;
        }

        .s-par {
            position: relative;
            width: 1090px;
            height: auto;
            margin: auto;
            background: #fff;
        }

        .smallimg {
            position: absolute;
            width: 100px;
            box-shadow: 0 0 5px grey;
        }
    </style>
</head>
<body>
<script>
    /*
     * 图片的瀑布流
     * */
    var img = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg"];
    //默