CSS + JS 实现 "猜你喜欢" 布局

在很多电商或社交媒体网站中，常会看到一个 "猜你喜欢" 的模块，推荐一些可能感兴趣的内容。下面是一个简单的示例，展示如何使用 HTML、CSS 和 JavaScript 实现这样的布局。

HTML 结构

<div class="recommend-container">
  <h2>猜你喜欢</h2>
  <div class="recommend-items" id="recommend-items">
    <!-- 推荐项将动态添加在这里 -->
  </div>
</div>

CSS 样式

.recommend-container {
  margin: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.recommend-items {
  display: flex;
  flex-wrap: wrap;
}

.recommend-item {
  flex: 0 0 calc(33.3333% - 10px);
  margin: 5px;
  padding: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.recommend-item img {
  max-width: 100%;
  height: auto;
}

.recommend-item h3 {
  font-size: 16px;
  margin-top: 10px;
}

JavaScript 代码

// 假设这是你的推荐数据
const recommendData = [
  { id: 1, title: '商品1', img: 'img1.jpg' },
  { id: 2, title: '商品2', img: 'img2.jpg' },
  { id: 3, title: '商品3', img: 'img3.jpg' },
  // ...更多数据
];

// 获取推荐项容器
const recommendItemsContainer = document.getElementById('recommend-items');

// 动态添加推荐项
recommendData.forEach((item) => {
  const recommendItem = document.createElement('div');
  recommendItem.className = 'recommend-item';
  recommendItem.innerHTML = `
    <img src="${item.img}" alt="${item.title}" />
    <h3>${item.title}</h3>
  `;
  recommendItemsContainer.appendChild(recommendItem);
});

在这个示例中，.recommend-container 是整个 "猜你喜欢" 模块的容器，.recommend-items 是推荐项的容器，.recommend-item 则是每个单独的推荐项。

JavaScript 代码负责动态生成推荐项。在这里，我用一个假设的 recommendData 数组来模拟推荐数据。你可以根据实际情况，比如从服务器获取这些数据。

这只是一个非常基础的示例，你可以根据实际需求进行更多的定制和优化。希望这能帮助你实现 "猜你喜欢" 的布局！