30天做出一個線上相簿

html

yuuuun 2025-10-17 22:49:36 ‧ 143 瀏覽

分享至

Day 13 學習報告

主題：排序功能完成

一、學習目標

本日的目標是讓使用者可以更方便地瀏覽相簿內容，因此我加入了「排序功能」。這個功能能讓使用者依照上傳順序、檔名或檔案大小重新排列所有圖片，方便在大量相片中找到特定的內容。這項設計強調使用者體驗與互動性，也是線上相簿系統中非常重要的核心功能之一。

二、學習過程與方法

我在前幾天完成了搜尋功能後，發現相簿圖片會依上傳時間堆疊顯示，因此決定使用JavaScript 的 sort() 方法實現排序功能。我新增了一個 <select> 下拉選單，提供三種排序選項（上傳順序、檔名、大小），並設計 updateGallery() 函式，讓它自動根據使用者的選擇重新排列圖片列表。過程中還需要確保搜尋和排序功能可以同時運作，因此我將兩者整合到同一邏輯中。

三、實作成果

實作完成後，使用者可以在上傳圖片後，透過下拉選單立即改變顯示順序。不論是依照檔名的字母順序、依照檔案大小由小到大，或維持原本的上傳順序，系統都能即時更新畫面，不需要重新整理頁面。這樣的互動方式大大提升了瀏覽的便利性與視覺一致性，也為未來的排序擴充（如依拍攝日期或分類）打下良好基礎。

四、主要程式碼區塊

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day13 – 排序功能</title>
  <style>
    /*  全域樣式 */
    :root {
      --bg: #ffffff;
      --primary: darkorange;
      --accent: coral;
      --text: #333;
      --muted: #777;
      --border: #e6e6e6;
      --btn: #ff8c42;
      --btn-hover: #ff6a00;
      --card-bg: #fff;
    }

    body {
      font-family: "Microsoft JhengHei", Arial, sans-serif;
      background-color: var(--bg);
      margin: 20px;
      text-align: center;
    }

    h1 { color: var(--primary); }
    p { font-size: 18px; color: var(--accent); }

    input[type="text"], input[type="file"], select {
      margin: 10px;
      padding: 8px 15px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 16px;
      cursor: pointer;
    }

    /* 相簿區塊 */
    #gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .photo-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      background: var(--card-bg);
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      position: relative;
      transition: 0.3s;
    }

    .photo-card:hover {
      transform: translateY(-3px);
    }

    .photo-card img {
      width: 100%;
      border-radius: 10px;
      border: 2px solid #ddd;
    }

    .info {
      font-size: 14px;
      color: var(--text);
      margin-top: 8px;
      line-height: 1.5;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }

    .category-tag {
      background: var(--accent);
      color: white;
      border-radius: 5px;
      padding: 3px 8px;
      font-size: 12px;
      position: absolute;
      top: 8px;
      left: 8px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <h1>我的線上相簿</h1>
  <p>Day13：支援排序功能（依檔名、大小、上傳順序）</p>

  <!--  搜尋框 -->
  <input type="text" id="search" placeholder="輸入關鍵字搜尋（分類或檔名）" />

  <!-- 📂 分類選擇 -->
  <label for="category">選擇分類：</label>
  <select id="category">
    <option value="旅遊"> 旅遊</option>
    <option value="生活"> 生活</option>
    <option value="寵物"> 寵物</option>
  </select>

  <!--  排序選擇 -->
  <label for="sort">排序依據：</label>
  <select id="sort">
    <option value="default">上傳順序</option>
    <option value="name">檔名</option>
    <option value="size">檔案大小</option>
  </select>

  <!--  上傳圖片 -->
  <input type="file" id="upload" accept="image/*" multiple>

  <!-- 相簿展示 -->
  <div id="gallery"></div>

  <script>
    const upload = document.getElementById("upload");
    const gallery = document.getElementById("gallery");
    const categorySelect = document.getElementById("category");
    const searchInput = document.getElementById("search");
    const sortSelect = document.getElementById("sort");

    let photos = [];

    //  上傳圖片
    upload.addEventListener("change", function() {
      const category = categorySelect.value;
      Array.from(this.files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(e) {
          const img = new Image();
          img.onload = function() {
            const photoData = {
              category: category,
              name: file.name,
              size: (file.size / 1024).toFixed(1),
              width: img.width,
              height: img.height,
              src: e.target.result,
              timestamp: Date.now()
            };
            photos.push(photoData);
            updateGallery();
          };
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      });
    });

    //  搜尋功能
    searchInput.addEventListener("input", updateGallery);

    //  排序功能
    sortSelect.addEventListener("change", updateGallery);

    // 更新畫面：依搜尋與排序顯示
    function updateGallery() {
      const keyword = searchInput.value.trim().toLowerCase();

      let filtered = photos.filter(photo =>
        photo.category.toLowerCase().includes(keyword) ||
        photo.name.toLowerCase().includes(keyword)
      );

      const sortBy = sortSelect.value;
      if (sortBy === "name") {
        filtered.sort((a, b) => a.name.localeCompare(b.name, "zh-Hant"));
      } else if (sortBy === "size") {
        filtered.sort((a, b) => a.size - b.size);
      } else {
        filtered.sort((a, b) => a.timestamp - b.timestamp);
      }

      renderGallery(filtered);
    }

    //  渲染圖片相簿
    function renderGallery(list) {
      gallery.innerHTML = "";
      list.forEach(photo => {
        const card = document.createElement("div");
        card.classList.add("photo-card");

        const tag = document.createElement("div");
        tag.classList.add("category-tag");
        tag.textContent = photo.category;

        const img = document.createElement("img");
        img.src = photo.src;

        const info = document.createElement("p");
        info.classList.add("info");
        const shortName = photo.name.length > 25 ? photo.name.slice(0, 25) + "..." : photo.name;
        info.textContent = 
          `分類: ${photo.category} ｜ 檔名: ${shortName} ｜ 大小: ${photo.size} KB ｜ 尺寸: ${photo.width}x${photo.height}`;

        card.appendChild(tag);
        card.appendChild(img);
        card.appendChild(info);
        gallery.appendChild(card);
      });
    }

    console.log(" Day13：排序功能完成");
  </script>
</body>
</html>