grid布局不规则宫格图片

DALUSHIRENLLL

已于 2023-04-03 15:23:00 修改

阅读量455

点赞数 1

文章标签： css3 html

于 2023-04-03 15:15:23 首次发布

本文链接：https://blog.csdn.net/DALUSHIRENLLL/article/details/129930270

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>grid布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .content {
            width: 500px;
            height: 269px;
            border: 1px solid #000;
            display: grid;
            grid-template-rows: 100px 60px 109px;
            grid-template-columns: 160px 10px 175px 155px;
        }

        span {
            /* background: url("bg.png") no-repeat; */
            background-repeat: no-repeat;
            background-size: 500px 269px;
            transition: 300ms;
            margin-right: 3px;
            margin-bottom: 3px;
        }

        span:hover {
            transform: scale(1.2);
        }

        span:nth-child(1) {
            grid-row: 1/3;
            grid-column: 1/2;
        }

        span:nth-child(2) {
            grid-row: 1/3;
            grid-column: 2/4;
            background-position: -160px 0;
        }

        span:nth-child(3) {
            grid-row: 1/2;
            grid-column: 4/5;
            background-position: -345px 0;
            margin-right: 0;

        }

        span:nth-child(4) {
            grid-row: 3/4;
            grid-column: 1/3;
            background-position: 0 -160px;
            margin-bottom: 0;
        }

        span:nth-child(5) {
            grid-row: 3/4;
            grid-column: 3/4;
            background-position: -170px -160px;
            margin-bottom: 0;
        }

        span:nth-child(6) {
            grid-row: 2/4;
            grid-column: 4/5;
            background-position: -345px -100px;
            margin-right: 0;
            margin-bottom: 0;
        }

        #uploadFile {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <input type="file" id="uploadFile" accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG, .bmp, .BMP, .gif, .GIF"
        onchange="uploadImg(event)">
    <div class="content" id="content">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</body>

<script>
    // 上传图片
    function uploadImg(e) {
        if (e.target.files.length === 0) {
            console.error("请重新上传");
            return
        }
        const file = e.target.files[0];
        const imgSrc = getObjectURL(file);
        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif' && file.type !==
            'image/gif') {
            alert("请上传jpg,jpeg,bmp,gif格式的文件");
            return;
        }
        showImg(imgSrc);
    }
    // 获取图片src
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    // 修改背景图片
    function showImg(src) {
        let nodes = document.getElementById('content').getElementsByTagName("span");
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].style.backgroundImage = `url(${src})`;
        }
    }
    // 初始默认图片
    let imgSrc = "bg.png";
    showImg(imgSrc);
</script>

</html>