jQuery画廊代码仅刷新后生效，Wix式作品集布局问题求助

Let's break down why your script isn't working as expected, then go over fixes and better alternatives for building that Wix-style portfolio gallery.

核心问题所在 #

1. 字符串形式的高度比较错误
   你用$('#gallery-holder-1').css("height")获取的是带单位的字符串（比如"0px"、"20px"），直接用这些字符串做大小比较会出问题。举个例子：字符串"100px"和"20px"比较时，"100px"会被判定为更小，因为字符串比较是按字符顺序来的（"1" < "2"）。这直接导致你的"找最矮列"逻辑完全失效。

2. DOM就绪但图片未加载
   $(document).ready()只会等待DOM结构加载完成，此时你的图片还没开始加载或者没加载完毕，容器的高度还是空容器的初始值。而且你的循环是同步执行的，图片还没渲染到页面，容器高度不会立刻更新，所以所有图片都会被加到同一个列里。

修复你的现有脚本 #

这里是调整后的代码，解决了上述两个问题：

const images = ["img1.png", "img2.png", "img3.png", "img4.png", "img5.png"];

// 封装函数：将单张图片添加到最矮列，图片加载完成后再继续下一步
function addImageToShortestColumn(imgSrc) {
  return new Promise((resolve) => {
    // 使用jQuery的height()获取数值形式的容器高度（不带px单位）
    const height1 = $('#gallery-holder-1').height();
    const height2 = $('#gallery-holder-2').height();
    const height3 = $('#gallery-holder-3').height();
    
    // 找出当前最矮的列
    let targetHolder = 1;
    if (height2 < height1 && height2 < height3) {
      targetHolder = 2;
    } else if (height3 < height1 && height3 < height2) {
      targetHolder = 3;
    }
    
    // 创建图片元素并监听加载状态
    const img = document.createElement("img");
    img.src = imgSrc;
    
    // 图片加载完成后再添加到容器，确保高度更新
    img.onload = () => {
      $(`#gallery-holder-${targetHolder}`).append(img);
      resolve();
    };
    
    // 处理图片加载失败的情况（可选）
    img.onerror = () => {
      console.warn(`Failed to load ${imgSrc}`);
      $(`#gallery-holder-${targetHolder}`).append(img);
      resolve();
    };
  });
}

// 等待所有资源（包括图片）加载完成后，按顺序处理每张图片
$(window).on('load', async function() {
  for (const image of images) {
    await addImageToShortestColumn(image);
  }
});

关键调整点：

• 用height()替代css("height")，获取纯数值的高度，确保比较逻辑正确。
• 用Promise和async/await实现异步加载，每张图片加载完成后再计算下一张的目标列，保证容器高度能正确更新。
• 监听window.load事件，确保页面所有资源（包括图片）都加载完成后再执行布局逻辑。

更优的实现方案：用CSS原生布局替代脚本 #

其实你完全不需要自己写复杂的布局脚本，CSS原生的多列布局就能轻松实现Wix式的瀑布流效果，代码更简洁、性能更好：

CSS 多列布局方案 #

/* 给你的画廊容器设置多列 */
#gallery-container {
  column-count: 3; /* 分成3列 */
  column-gap: 20px; /* 列之间的间距 */
}

/* 防止图片被拆分到两列 */
.gallery-holder {
  break-inside: avoid;
  margin-bottom: 20px; /* 图片之间的垂直间距 */
}

.gallery-holder img {
  width: 100%;
  height: auto;
  display: block;
}

然后你的HTML结构可以简化，不需要提前创建3个列div，直接把所有图片放到容器里就行：

<div id="gallery-container">
  <img src="img1.png" alt="" class="gallery-holder">
  <img src="img2.png" alt="" class="gallery-holder">
  <!-- 所有图片... -->
</div>

这种方案的优势：

• 完全不需要JavaScript，维护成本极低。
• 浏览器原生支持，性能比脚本实现更好。
• 响应式友好，调整窗口大小会自动重新布局。

如果需要更精细的控制（比如固定列宽、自定义排序），可以考虑使用CSS Grid或者轻量级的瀑布流库，但对于大多数作品集场景，CSS多列布局已经足够好用。

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