双Logo网格实现咨询：随机展示与动态生成需求

一、Grid 1（首页示例区：2行3列随机Logo） #

1. 布局失效修复 #

原布局问题大概率是未正确设置网格容器基础属性或未限制图片尺寸，以下是可直接使用的CSS：

/* Grid1容器样式 */
.grid-1 {
  display: grid;
  /* 固定2行3列，每列宽度自适应 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  /* 网格间距 */
  gap: 1.5rem;
  /* 容器水平居中，需设置最大宽度限制 */
  max-width: 900px;
  margin: 0 auto;
  /* 网格内元素居中对齐 */
  place-items: center;
}

/* 图片尺寸限制，避免撑乱布局 */
.grid-1 img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

关键修正点：

• 必须给容器添加display: grid
• 通过max-width配合margin: 0 auto实现容器居中
• 限制图片最大宽度，防止网格列宽被撑开

2. 随机图片JS代码完善（去重+适配） #

原代码存在myPics为空、选择器错误、可能重复选图的问题，以下是优化版本：

window.onload = function () {
  // 手动定义img文件夹内的图片路径，或通过Firebase自动获取（见下文）
  let myPics = [
    'img/logo1.png',
    'img/logo2.png',
    'img/logo3.png',
    'img/logo4.png',
    'img/logo5.png',
    'img/logo6.png',
    'img/logo7.png'
  ];

  // 生成指定数量的不重复随机索引
  function getUniqueRandomIndexes(count) {
    const indexes = [];
    while (indexes.length < count) {
      const idx = Math.floor(Math.random() * myPics.length);
      if (!indexes.includes(idx)) indexes.push(idx);
    }
    return indexes;
  }

  function showPics() {
    // 选择Grid1内的所有img元素（需给Grid容器加grid-1类）
    const imgTags = document.querySelectorAll('.grid-1 img');
    const randomIndexes = getUniqueRandomIndexes(imgTags.length);
    
    imgTags.forEach((tag, index) => {
      const picIndex = randomIndexes[index];
      tag.src = myPics[picIndex];
      tag.alt = `示例Logo ${index + 1}`;
      tag.addEventListener('click', () => alert(myPics[picIndex]));
      tag.dataset.index = picIndex;
    });
  }

  showPics();
};

Firebase自动获取图片列表 #

无需手动维护myPics数组，可通过Firebase Storage读取img文件夹内所有文件：

// 引入Firebase Storage SDK后使用
import { getStorage, ref, listAll, getDownloadURL } from "firebase/storage";

const storage = getStorage();
const imgRef = ref(storage, 'img/');

listAll(imgRef)
  .then((res) => {
    // 获取所有图片的可访问链接
    Promise.all(res.items.map(item => getDownloadURL(item)))
      .then(urls => {
        myPics = urls;
        showPics();
      });
  })
  .catch(err => console.error('获取图片失败:', err));

二、Grid 2（合作伙伴页面：动态网格+点击跳转） #

1. 响应式动态网格布局 #

根据图片数量自动适配列数，CSS如下：

/* Grid2容器样式 */
.grid-2 {
  display: grid;
  /* 响应式列：最小200px一列，自动填充宽度 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  place-items: center;
  padding: 2rem 0;
}

/* 让a标签包裹整个点击区域 */
.grid-2 a {
  display: block;
}

.grid-2 img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

2. 动态生成DOM+跳转逻辑 #

建议用Firebase Firestore存储Logo与官网的对应关系，便于维护：

Firestore数据结构（集合：partners）

{
  "logoPath": "img/partner1.png",
  "websiteUrl": "https://partner1.com",
  "partnerName": "合作伙伴1"
}

JS动态生成代码

import { getFirestore, collection, getDocs } from "firebase/firestore";
import { getStorage, ref, getDownloadURL } from "firebase/storage";

const db = getFirestore();
const storage = getStorage();
const grid2Container = document.querySelector('.grid-2');

async function loadPartners() {
  // 按Firestore文档顺序读取数据（可添加orderBy自定义排序）
  const querySnapshot = await getDocs(collection(db, "partners"));
  const partners = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));

  partners.forEach(async (partner) => {
    // 获取图片下载链接
    const logoRef = ref(storage, partner.logoPath);
    const logoUrl = await getDownloadURL(logoRef);

    // 创建跳转链接与图片元素
    const link = document.createElement('a');
    link.href = partner.websiteUrl;
    link.target = '_blank';
    link.rel = 'noopener noreferrer';

    const img = document.createElement('img');
    img.src = logoUrl;
    img.alt = `${partner.partnerName} Logo`;

    link.appendChild(img);
    grid2Container.appendChild(link);
  });
}

// 页面加载时执行
window.onload = function() {
  loadPartners();
};

替代方案：如果不想用数据库，可创建本地partners.json文件，通过fetch读取并生成DOM。

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