求助：点击底部Try按钮实现Container内随机图片随机位置显示

Hey Daniel, sounds like you’re already crushing the random image part—nice work! Let’s get that random positioning sorted so your images pop up anywhere in the Container every time you hit the "Try" button. Here’s how to make it happen:

First off, your Container needs a position: relative CSS rule. This tells any absolutely positioned child elements (your images) that their top-left coordinate origin is the Container’s corner, not the whole page. Add this to your styles:

.container {
  position: relative;
  /* Keep your existing styles here—like width, height, background, etc. */
  width: 700px;
  height: 500px;
  border: 2px solid #ddd;
  overflow: hidden; /* Optional: Hides bits of images that go outside the container */
}

When you generate a new random image, you need to calculate X and Y values that keep it within the Container (or let it hang over if that’s your vibe—adjust the math!). Here’s the JavaScript breakdown:

1. Grab the Container’s current width and height.
2. Wait for the image to load first (so you know its actual dimensions).
3. Generate random X: between 0 and (Container width - Image width)
4. Generate random Y: between 0 and (Container height - Image height)

Here’s a full code snippet that ties this to your existing random image logic:

// Grab your elements
const container = document.querySelector('.container');
const tryBtn = document.querySelector('.try-button');

// Attach click handler
tryBtn.addEventListener('click', () => {
  // Your existing random image source logic
  const imageSources = ['dog.jpg', 'cat.jpg', 'bird.jpg', 'fox.jpg'];
  const randomSrc = imageSources[Math.floor(Math.random() * imageSources.length)];

  // Create new image element
  const randomImage = document.createElement('img');
  randomImage.src = randomSrc;
  randomImage.style.position = 'absolute'; // Must have this to use top/left positioning

  // Wait for image to load before calculating positions
  randomImage.onload = () => {
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;
    const imgWidth = randomImage.offsetWidth;
    const imgHeight = randomImage.offsetHeight;

    // Calculate positions that keep the image inside the container
    const randomX = Math.floor(Math.random() * (containerWidth - imgWidth));
    const randomY = Math.floor(Math.random() * (containerHeight - imgHeight));

    // Apply the positions
    randomImage.style.left = `${randomX}px`;
    randomImage.style.top = `${randomY}px`;

    // Add the image to the container
    container.appendChild(randomImage);
  };
});

If you don’t want a stack of images piling up each click, add this line right before creating the new image to wipe the container clean:

container.innerHTML = '';

• Images are positioning relative to the page, not the container? Double-check that your Container has position: relative set—this is the most common gotcha.
• Images are getting cut off or going outside? Make sure you’re subtracting the image’s width/height from the container’s dimensions when calculating X/Y. If you want images to hang over, skip the subtraction and just use Math.random() * containerWidth for X.
• Image dimensions are 0 when calculating positions? Always wait for the onload event—if you try to get dimensions before the image loads, the browser won’t know how big it is yet.

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