JavaScript实现四宫格

// 获取四宫格容器元素
var container = document.getElementById("container");

// 定义图片地址数组和标题数组
var imgSrcs = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"];
var titles = ["图片1", "图片2", "图片3", "图片4"];

// 循环生成四个图片块
for (var i = 0; i < 4; i++) {
  // 创建图片容器元素
  var imgContainer = document.createElement("div");
  imgContainer.className = "img-container";
  
  // 创建图片元素
  var img = document.createElement("img");
  img.src = imgSrcs[i];
  img.alt = titles[i];
  
  // 创建标题元素
  var title = document.createElement("p");
  title.textContent = titles[i];
  
  // 将图片和标题添加到图片容器中
  imgContainer.appendChild(img);
  imgContainer.appendChild(title);
  
  // 将图片容器添加到四宫格容器中
  container.appendChild(imgContainer);
}

/* 四宫格容器样式 */
#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}

/* 图片容器样式 */
.img-container {
  width: 48%;
  margin-bottom: 2%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}

/* 图片样式 */
.img-container img {
  display: block;
  width: 100%;
}

/* 标题样式 */
.img-container p {
  font-size: 20px;
  text-align: center;
  margin: 10px 0;
}