瀑布流JS

最新推荐文章于 2024-08-13 16:15:07 发布

_最初の心

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量183

点赞数 7

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

本文链接：https://blog.csdn.net/qq_36405210/article/details/139012338

版权

web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!-- 容器 -->
    <div class="container"></div>
    <script src="./index.js"></script>
</body>
</html>

2. css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container{
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.container img{
    position: absolute;
}

3. js

let container = document.getElementsByClassName('container')[0];

// 随机数（包含最小值、最大值）
function myRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
// 创建图片
function createImage(){
    for (let i = 1; i < 200; i++) {
        // 获取随机数
        const n = myRandom(1, 10);
        // 创建img元素
        const img = document.createElement('img');
        img.src = `./img/${n}.jpg`;
        container.appendChild(img);
    }
}
createImage();

// 获取列数和空隙   
function call(){
    // 获取容器的第一个子元素
    let img = container.firstChild;
    // 获取图片宽度
    let imgWidth = img.offsetWidth;
    // 获取容器的宽度
    let containerWidth = container.offsetWidth;
    // 获取列数
    let column = Math.floor(containerWidth / imgWidth);
    // 获取空隙
    let space = (containerWidth - column * imgWidth) / (column + 1);
    return {
        column,
        space
    };
}
// 设置图片位置
function setPosition(){
    // 获取列数和空隙
    let { column, space } = call();
    // 获取图片
    let img = container.children;
    // 创建一个数组，长度为列数，每个元素为0
    let arr = new Array(column).fill(0);
    // 遍历图片
    for (let i = 0; i < img.length; i++) {
        // 获取最小值
        let min = Math.min(...arr);
        // 获取最小值的索引
        let index = arr.indexOf(min);
        // 设置图片位置
        img[i].style.left = index * img[i].offsetWidth + (index + 1) * space + 'px';
        img[i].style.top = min + 'px';
        // 更新数组
        arr[index] += img[i].offsetHeight + space;

        // 设置容器高度
        let max = Math.max(...arr);
        container.style.height = max + 'px';
    }
    let max = Math.max(...arr);
    container.style.height = max + 'px';
}

window.onload = setPosition;

效果：