构建可水平滚动且布局优雅的图片展示区域

<div id="container">
  <!-- 这是一个示例的添加按钮，可根据需求自行调整 -->
  <button class="add-button">+</button>

  <!-- 图片将在此区域内显示并水平滚动 -->
  <div id="result">
    <!-- 示例图片，实际应用中会由JavaScript动态添加 -->
    <!-- <img class="thumbnail" src="https://picsum.photos/500" alt="示例图片"> -->
  </div>
</div>

<!-- 用于文件选择的隐藏input，实际应用中可能通过点击上面的button触发 -->
<input type="file" id="files" multiple accept="image/*" style="display: none;">

/* 定义全局变量，便于统一管理高度和滚动条高度 */
#container {
    /* --height: 控制父容器（和图片区域）的高度，使用vw单位使其响应式 */
    --height: 15vw; 
    /* --scrollBarHeight: 估算或手动设置滚动条的高度，用于调整图片高度以避免遮挡 */
    --scrollBarHeight: 15px; 
    border: 1px solid #ccc; /* 示例边框 */
    padding: 1rem; /* 内部间距 */
    /* 使用Grid布局来排列按钮和图片区域 */
    display: grid;
    grid-template-columns: auto 1fr; /* 按钮自动宽度，图片区域占据剩余空间 */
    gap: 1rem; /* 按钮与图片区域之间的间距 */
    align-items: center; /* 垂直居中对齐 */
}

/* 按钮样式 */
#container .add-button {
    height: var(--height); /* 按钮高度与图片区域高度一致 */
    width: var(--height);  /* 制作一个正方形按钮 */
    font-size: calc(var(--height) / 1.5); /* 字体大小随高度变化 */
    border: 1px solid #007bff;
    background-color: #e9f5ff;
    color: #007bff;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
}

#container .add-button:hover {
    background-color: #d0e8ff;
}

/* 图片展示区域样式 */
#result {
    height: var(--height); /* 高度由CSS变量控制 */
    display: flex; /* 启用Flexbox布局，使图片水平排列 */
    gap: 0.5rem; /* 图片之间的间距 */
    overflow-x: scroll; /* 允许水平滚动 */
    overflow-y: hidden; /* 隐藏垂直滚动条 */
    padding-bottom: var(--scrollBarHeight); /* 留出滚动条空间，防止其覆盖图片 */
    box-sizing: border-box; /* 确保padding包含在height内 */
    background-color: #f8f8f8; /* 示例背景色 */
    border-radius: 8px;
}

/* 缩略图图片样式 */
#result .thumbnail {
    /* 关键：图片高度减去滚动条高度，防止滚动条遮挡图片 */
    height: calc(var(--height) - var(--scrollBarHeight)); 
    width: auto; /* 宽度自适应，保持图片比例 */
    flex-shrink: 0; /* 防止图片在空间不足时缩小 */
    object-fit: cover; /* 裁剪图片以填充容器，保持宽高比 */
    border-radius: 6px;
    border: 1px solid #ddd;
}

/* 隐藏滚动条但保留滚动功能 (可选，根据设计需求) */
#result::-webkit-scrollbar {
    height: var(--scrollBarHeight);
    background-color: transparent;
}

#result::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}

#result::-webkit-scrollbar-track {
    background-color: transparent;
}

document.addEventListener('DOMContentLoaded', () => {
    const filesInput = document.querySelector("#files");
    const resultOutput = document.querySelector("#result");
    const addButton = document.querySelector(".add-button");

    // 点击添加按钮触发文件选择
    if (addButton && filesInput) {
        addButton.addEventListener("click", () => {
            filesInput.click();
        });
    }

    if (filesInput) {
        filesInput.addEventListener("change", (e) => {
            // 检查浏览器是否支持File API
            if (window.File && window.FileReader && window.FileList && window.Blob) {
                const files = e.target.files;

                if (files.length === 0) {
                    return; // 没有选择文件
                }

                for (let i = 0; i < files.length; i++) {
                    // 只处理图片文件
                    if (!files[i].type.match("image.*")) {
                        console.warn(`文件 ${files[i].name} 不是图片，已跳过。`);
                        continue;
                    }

                    const picReader = new FileReader();

                    picReader.addEventListener("load", function(event) {
                        const picFile = event.target;
                        // 直接创建 img 元素并设置属性
                        const img = document.createElement("img");
                        img.className = "thumbnail"; // 应用CSS样式
                        img.src = picFile.result;     // 图片数据URL
                        img.title = picFile.name;     // 鼠标悬停显示文件名
                        img.alt = `Uploaded image: ${picFile.name}`; // 辅助文本

                        resultOutput.appendChild(img); // 将 img 元素添加到 #result 容器
                    });

                    // 读取文件内容为Data URL
                    picReader.readAsDataURL(files[i]);
                }
            } else {
                alert("您的浏览器不支持File API，请升级浏览器。");
            }
        });
    }
});

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可水平滚动图片展示区域教程</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>图片上传与水平滚动展示</h1>
    <p>点击“+”按钮上传图片，图片将在下方区域水平排列并可滚动。</p>

    <div id="container">
      <button class="add-button">+</button>
      <div id="result">
        <!-- 初始可放置一些占位图片或为空 -->
      </div>
    </div>

    <input type="file" id="files" multiple accept="image/*" style="display: none;">

    <script src="script.js"></script>
</body>
</html>