个人摄影网站人像区图片显示与点击交互功能实现咨询

功能实现修改方案 #

1. CSS代码修改/新增部分

替换原有.row、.column相关规则，新增适配样式：

/* 新增：flex布局保证缩略图规整排列，替代原有浮动逻辑 */
.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
/* 桌面端打开大图后的缩略图横向滚动样式（仅在≥768px宽度设备生效） */
@media screen and (min-width: 768px) {
  .row.active {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  .row.active .column {
    flex: 0 0 180px;
    width: 180px;
  }
}
/* 调整原有.column规则，删除float属性 */
.column {
  width: 25%;
  padding: 10px;
}
/* 可选：统一缩略图比例，避免高度不一导致布局错位，可根据你的图片比例调整参数 */
.column img {
  opacity: 0.8;
  cursor: pointer;
  aspect-ratio: 3/4;
  object-fit: cover;
}

2. JavaScript代码修改部分

替换原有myFunction，新增关闭大图逻辑：

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  var imgContainer = expandImg.parentElement;
  var thumbRow = document.querySelector('.row');
  // 若你的缩略图和高清图路径不同，比如缩略图带sc后缀、高清图不带，保留下一行，否则删除即可
  expandImg.src = imgs.src.replace('sc.PNG', '.PNG');
  imgText.innerHTML = imgs.alt;
  imgContainer.style.display = "block";
  // 切换缩略图为横向滚动模式
  thumbRow.classList.add('active');
  // 平滑滚动到大图展示位置
  imgContainer.scrollIntoView({behavior: 'smooth'});
}

// 新增关闭大图函数
function closeExpandedImg() {
  var imgContainer = document.querySelector('.container');
  var thumbRow = document.querySelector('.row');
  imgContainer.style.display = 'none';
  // 恢复缩略图多列布局
  thumbRow.classList.remove('active');
}

3. HTML代码修改部分

替换原有关闭按钮的点击事件：

<span onclick="closeExpandedImg()" class="closebtn">&times;</span>

修改完成后即可完全满足你提出的三个功能需求，缩略图不会出现浮动错位，点击交互符合预期。

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