单页用户卡片网站开发技术求助：无Fetch引入userData文件与多列布局实现

Hey there! Let's break down how to fix both of your problems step by step.

1. Importing userData Without Fetch #

If you don't want to use fetch, the simplest way to import your external userData file is to use ES6 modules. Here's how:

Step 1: Set Up the External userData File #

Create a file named userData.js and export your data array:

export const userData = [ 
  { "id": 1, "name": "John", "description": "fafewqrewrqwer2322revzd", "profilePicture": "https://images.unsplash.com/1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80" }, 
  { "id": 2, "name": "Josh", "description": "qweqwsxasdqwew", "profilePicture": "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80" }, 
  { "id": 3, "name": "Jane", "description": "yjtykyumjhjhjkgjhhjkhkj", "profilePicture": "https://media.istockphoto.com/photos/elegant-beauty-picture-id516208984?k=20&m=516208984&s=612x612&w=0&h=KooFBmqHtO2lz5CFV5Oe87u_12wgKCxHvTHxlYuErCU=" }, 
  { "id": 4, "name": "Iness", "description": "k4jh23k4jh23kjhk2jhk", "profilePicture": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80" }, 
  { "id": 5, "name": "Alex", "description": ";oiu;oxzkxfaklwejlkwej", "profilePicture": "https://images.unsplash.com/flagged/photo-1573740144655-bbb6e88fb18a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80" } 
];

Step 2: Update Your HTML Script Tag #

Change your main script tag to use type="module" so it can handle imports:

<script src='./script.js' type="module" defer></script>

Step 3: Import userData in Your Main Script #

At the top of script.js, add the import statement:

import { userData } from './userData.js';

Now you can use userData just like you did before, but it's loaded from the external file.

2. Implementing Multi-Column Layout for User Cards #

Right now, your body's flex properties are forcing the cards to stack vertically. Let's fix this by adding a container for the cards and using either CSS Grid or Flexbox for layout.

Option 1: CSS Grid (Recommended for Column Control) #

First, modify your JavaScript to create a container for the cards and populate them with user data (your original code was missing this part!):

const root = document.querySelector('#root');

// Create a container for all cards
const cardContainer = document.createElement('div');
cardContainer.classList.add('card-container');

function createCardSection(user) {
  const section = document.createElement('section');
  section.classList.add('section');
  
  // Build card content
  const img = document.createElement('img');
  img.src = user.profilePicture;
  const article = document.createElement('article');
  const name = document.createElement('h3');
  name.textContent = user.name;
  const desc = document.createElement('p');
  desc.textContent = user.description;
  const button = document.createElement('button');
  button.textContent = 'Contact';
  
  article.append(img, name, desc, button);
  section.appendChild(article);
  
  return section;
}

const userCards = userData.map(createCardSection);
cardContainer.append(...userCards);
root.appendChild(cardContainer);

Then update your CSS to style the container and adjust body layout:

body {
  margin: 0;
  padding: 2rem;
  background-color: blanchedalmond;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
  gap: 2rem; /* Space between cards */
  max-width: 1200px;
  margin: 0 auto; /* Center the container */
}

.section {
  position: relative;
  width: 250px;
  height: 350px;
  border: 2px solid black;
  background-color: white;
  border-radius: 15px;
  padding: 1rem;
  box-sizing: border-box; /* Prevent padding from increasing card size */
}

article {
  text-align: center;
  margin-top: 20%;
}

img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

button {
  background-color: hsl(229deg 100% 73%);
  border: none;
  width: 120px;
  height: 40px;
  border-radius: 10px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  cursor: pointer;
  box-shadow: 0 0 5px 0 black;
  margin-top: 20px;
}

Option 2: Flexbox Alternative #

If you prefer Flexbox, replace the .card-container CSS with this:

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

This will arrange your cards into 3-4 columns (depending on screen size) and wrap them when there's not enough space.

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