使用for循环实现一个照片墙(可加一个按钮刷新重置照片墙图片位置

使用for循环实现一个照片墙，首先我们需要准备一些照片和一个显示照片的容器，比如一个div元素。然后我们可以使用一个数组来存储照片的路径或者图片对象。

在HTML中，我们可以创建一个div容器，并为其设置一个id，如"photo-wall"。同时，我们还可以创建一个按钮，设置其id为"refresh-button"。

接下来，在JavaScript中，我们可以使用for循环来遍历照片数组，并创建一个img元素来显示每张照片。在每次循环中，我们可以将创建的img元素添加到照片墙容器中。

具体的代码如下：

HTML部分：

<button id="refresh-button" onclick="refreshPhotoWall()">刷新照片墙</button>
<div id="photo-wall"></div>

JavaScript部分：

var photos = ["photo1.jpg", "photo2.jpg", "photo3.jpg", "photo4.jpg", "photo5.jpg"];
var photoWall = document.getElementById("photo-wall");

function refreshPhotoWall() {
  // 清空照片墙中的内容
  photoWall.innerHTML = "";
  
  // 遍历照片数组并创建img元素
  for (var i = 0; i < photos.length; i++) {
    var img = document.createElement("img");
    img.src = photos[i];
    // 设置图片样式，如宽度、高度、边距等等
    img.style.width = "200px";
    img.style.height = "200px";
    img.style.margin = "10px";
    
    // 将img元素添加到照片墙中
    photoWall.appendChild(img);
  }
}

在上面的代码中，我们首先使用getElementById方法获取到id为"photo-wall"的div元素和id为"refresh-button"的按钮。然后定义了一个photos数组来存储照片的路径。接着我们定义了一个refreshPhotoWall函数，用于刷新照片墙。

在refreshPhotoWall函数中，我们先清空了照片墙的内容，然后使用for循环遍历照片数组，创建img元素并设置其src属性为当前照片路径，同时根据需要设置图片的样式。最后，将img元素添加到照片墙容器中。

最后，我们可以在按钮上添加一个点击事件，当点击按钮时，调用refreshPhotoWall函数来刷新照片墙。这样，每次点击按钮时，照片墙的位置都会被重置，显示新的照片位置。