使用Flickr API实现分类点击加载图片及布局优化求助

嘿，我来帮你一步步搞定这三个问题，都是前端开发里常见的小坑，别担心～

1. 点击分类调用Flickr API加载对应标签图片 #

首先，你需要给左侧分类栏的每个分类项绑定点击事件，比如给tennis分类加个点击监听，然后在事件函数里发起API请求。

步骤： #

• 给分类项加统一类名（比如category-item），方便批量绑定事件
• 编写API请求函数，根据点击的分类动态替换tags参数
• 处理返回的图片数据，渲染到右侧图片容器

示例代码：

<!-- 假设你的分类栏HTML结构 -->
<div class="category-bar">
  <div class="category-item" data-tag="tennis">Tennis</div>
  <div class="category-item" data-tag="basketball">Basketball</div>
  <!-- 其他分类项 -->
</div>

<!-- 图片容器 -->
<div class="image-container"></div>

// 替换成你自己的Flickr API密钥
const API_KEY = 'YOUR_FLICKR_API_KEY';
const imageContainer = document.querySelector('.image-container');

// 给所有分类项绑定点击事件
document.querySelectorAll('.category-item').forEach(item => {
  item.addEventListener('click', () => {
    const tag = item.dataset.tag; // 获取点击的分类标签
    loadImagesByTag(tag);
  });
});

// 加载对应标签的图片
async function loadImagesByTag(tag) {
  try {
    // Flickr搜索接口：tags指定标签，nojsoncallback=1返回纯JSON格式
    const response = await fetch(`https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${API_KEY}&tags=${tag}&per_page=20&format=json&nojsoncallback=1`);
    const data = await response.json();
    
    // 清空容器，避免叠加旧图片
    imageContainer.innerHTML = '';
    
    // 遍历照片数据，生成图片元素
    data.photos.photo.forEach(photo => {
      // 拼接Flickr图片URL，_q是小尺寸，可替换为s/m/l等
      const imgUrl = `https://live.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}_q.jpg`;
      const imgElement = createImageElement(photo, imgUrl);
      imageContainer.appendChild(imgElement);
    });
  } catch (error) {
    console.error('加载图片失败:', error);
  }
}

2. 显示图片标题 #

上面的代码里我们可以扩展一个函数，把图片和标题包裹在一个容器里，再通过CSS控制显示位置：

// 生成带标题的图片元素
function createImageElement(photo, imgUrl) {
  const photoWrapper = document.createElement('div');
  photoWrapper.className = 'photo-wrapper';
  
  const img = document.createElement('img');
  img.src = imgUrl;
  img.alt = photo.title;
  
  const title = document.createElement('div');
  title.className = 'photo-title';
  title.textContent = photo.title || '无标题'; // 标题为空时显示兜底文本
  
  photoWrapper.appendChild(img);
  photoWrapper.appendChild(title);
  return photoWrapper;
}

对应的CSS：

.photo-wrapper {
  margin: 10px;
  text-align: center;
}

.photo-title {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
  word-break: break-all; /* 长标题自动换行 */
}

3. 解决图片单列布局问题 #

图片一直单列，大概率是flex容器的flex-wrap属性没设置，或者图片容器宽度限制有问题。给图片容器加以下CSS：

.image-container {
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
  gap: 15px; /* 图片之间的间距，比margin更灵活 */
  padding: 10px;
}

.photo-wrapper {
  flex: 0 1 calc(25% - 15px); /* 一行显示4张，减去gap宽度，可调整为33%（3张）/50%（2张） */
  box-sizing: border-box; /* 确保padding/border不会撑开宽度 */
}

.photo-wrapper img {
  width: 100%; /* 图片占满容器宽度 */
  height: auto; /* 保持图片比例 */
  object-fit: cover; /* 可选：比例不一致时裁剪显示 */
}

如果需要响应式布局，再加个媒体查询：

@media (max-width: 768px) {
  .photo-wrapper {
    flex: 0 1 calc(50% - 15px); /* 手机端一行显示2张 */
  }
}

最后提醒：一定要替换代码里的YOUR_FLICKR_API_KEY为你自己在Flickr开发者平台申请的密钥，否则API请求会失败哦～

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