如何基于Azure Blob存储目录动态生成HTML Masonry视图？

要实现根据Azure Blob存储中masonryImages目录的图片动态生成Masonry视图，核心是获取目录内的图片文件列表，再通过JavaScript动态创建DOM元素。下面分步骤说明实现方式：

一、Azure Blob存储前置配置 #

1. 设置Blob访问权限：将masonryImages所在容器设为容器级公共访问（或针对该目录生成SAS令牌），确保前端能访问图片文件。
2. 选择文件列表获取方式：
   • 方案A（推荐）：通过Azure Functions/Azure Static Web Apps API编写后端接口，查询Blob存储的masonryImages目录，返回图片URL列表。
   • 方案B：手动/自动生成目录索引文件（如masonryImages/index.json），每次增删图片时同步更新该文件，前端直接请求这个JSON文件获取列表。

二、前端动态生成Masonry元素实现 #

假设已通过上述方案拿到图片URL数组imageUrls，以下是前端代码示例：

1. 修改基础HTML结构 #

保留空的Masonry容器，移除硬编码的图片项：

<div class="masonry" id="masonryContainer"></div>

2. 完善CSS样式（优化显示） #

为让Masonry布局更美观，补充图片和项的样式：

.masonry {
  column-count: 5;
  column-gap: 16px;
  padding: 16px;
}

.mItem {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.mItem img {
  width: 100%;
  height: auto;
  display: block;
}

3. JavaScript动态生成图片元素 #

通过JS获取图片URL列表，循环创建DOM元素并插入容器：

async function loadMasonryImages() {
  const masonryContainer = document.getElementById('masonryContainer');
  let imageUrls = [];

  // 方案A：调用后端API获取图片列表
  try {
    const response = await fetch('/api/getMasonryImages');
    imageUrls = await response.json();
  } catch (err) {
    console.error('获取图片列表失败:', err);
    return;
  }

  // 方案B：直接请求预生成的index.json文件
  // try {
  //   const response = await fetch('https://your-storage-account.z13.web.core.windows.net/masonryImages/index.json');
  //   imageUrls = await response.json();
  // } catch (err) {
  //   console.error('获取图片列表失败:', err);
  //   return;
  // }

  // 循环创建图片项并插入容器
  imageUrls.forEach(url => {
    const itemDiv = document.createElement('div');
    itemDiv.className = 'mItem';
    
    const img = document.createElement('img');
    img.src = url;
    img.alt = 'Masonry gallery image';
    
    itemDiv.appendChild(img);
    masonryContainer.appendChild(itemDiv);
  });
}

// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', loadMasonryImages);

三、后端API示例（Azure Functions） #

若选择方案A，以下是Azure Functions的Python示例（用于查询Blob存储的图片列表）：

import azure.functions as func
from azure.storage.blob import BlobServiceClient
import os

def main(req: func.HttpRequest) -> func.HttpResponse:
    try:
        # 从环境变量获取Blob连接字符串
        connect_str = os.getenv('AZURE_STORAGE_CONNECTION_STRING')
        blob_service_client = BlobServiceClient.from_connection_string(connect_str)
        
        # 指定容器和目录
        container_name = 'your-container-name'
        directory_name = 'masonryImages/'
        
        # 获取目录下所有Blob（过滤掉目录本身）
        blob_list = blob_service_client.get_container_client(container_name).list_blobs(name_starts_with=directory_name)
        image_urls = [f"https://your-storage-account.blob.core.windows.net/{container_name}/{blob.name}" for blob in blob_list if not blob.name.endswith('/')]
        
        return func.HttpResponse(
            body=str(image_urls).replace("'", '"'),
            mimetype="application/json",
            status_code=200
        )
    except Exception as e:
        return func.HttpResponse(f"Error: {str(e)}", status_code=500)

内容的提问来源于stack exchange，提问作者Ldweller