嘿，我懂你这种折腾了半天瀑布流却没搞定的烦躁！针对你这个固定高度ul容器、动态插入图片到li的场景，我给你两个靠谱的解决方案，亲测有效：

一、CSS Grid 原生瀑布流方案（现代浏览器首选） #

这个方案不用写复杂的JS，依赖现代浏览器对CSS Grid Masonry特性的支持，代码简洁还高效：

首先给你的ul容器设置Grid布局，关键是开启grid-template-rows: masonry，同时因为容器高度固定，一定要加overflow-y: auto避免内容被截断：

ul.masonry-container {
  height: calc(100vh - 110px); /* 你的固定高度，保持不变 */
  overflow-y: auto; /* 内容超出时自动滚动 */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列，可根据需求调整数量 */
  grid-template-rows: masonry; /* 核心：原生瀑布流布局 */
  grid-auto-rows: 0;
  gap: 16px; /* 可选：列/行之间的间距，提升美观度 */
  padding: 0;
  list-style: none; /* 去掉默认列表样式 */
}

ul.masonry-container li {
  break-inside: avoid; /* 防止li元素被拆分到不同行，保证内容完整性 */
  margin: 0;
}

ul.masonry-container li img {
  width: 100%; /* 这里把你之前的width:auto改成100%，确保图片适配列宽 */
  height: auto;
  vertical-align: middle;
  border: 0;
  display: block; /* 去掉图片底部的默认间隙 */
}

小提示： #

• 目前Chrome、Firefox、Edge等主流现代浏览器都支持这个特性，不需要额外引入库
• 如果是动态加载图片，记得监听图片加载完成事件，确保Grid能重新计算布局；如果知道图片比例，也可以给img加aspect-ratio属性提前占位，避免布局跳动

二、JS 辅助瀑布流方案（兼容旧浏览器） #

如果需要兼容IE或者老版本浏览器，就用JS计算每个li的位置，兼容性拉满：

先给容器和li设置基础样式：

ul.masonry-container {
  height: calc(100vh - 110px);
  overflow-y: auto;
  position: relative; /* 作为li绝对定位的参考 */
  padding: 0;
  list-style: none;
}

ul.masonry-container li {
  position: absolute;
  margin: 0;
  width: calc(33.333% - 10px); /* 3列，减去间距，和JS里的配置对应 */
}

ul.masonry-container li img {
  width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  display: block;
}

然后用JS计算每个li的位置，核心逻辑是把每个li放到当前高度最小的列下方：

function initMasonry() {
  const container = document.querySelector('.masonry-container');
  const items = container.querySelectorAll('li');
  const columnCount = 3; // 列数，和CSS里的宽度比例对应
  const gap = 10; // 和CSS里的间距保持一致
  const columnHeights = new Array(columnCount).fill(0); // 记录每列的当前高度

  items.forEach((item) => {
    // 找到当前高度最小的列
    const minColIndex = columnHeights.indexOf(Math.min(...columnHeights));
    // 设置li的位置
    item.style.left = `${minColIndex * (100 / columnCount)}%`;
    item.style.top = `${columnHeights[minColIndex]}px`;
    // 更新该列的高度（加上当前li的高度和间距）
    columnHeights[minColIndex] += item.offsetHeight + gap;
  });
}

// 页面加载完成后，等所有图片加载完毕再初始化瀑布流
document.addEventListener('DOMContentLoaded', () => {
  const allImgs = document.querySelectorAll('.masonry-container img');
  let loadedImgs = 0;

  allImgs.forEach(img => {
    if (img.complete) {
      loadedImgs++;
    } else {
      img.addEventListener('load', () => {
        loadedImgs++;
        // 所有图片加载完成后再计算布局，避免高度不准确
        if (loadedImgs === allImgs.length) {
          initMasonry();
        }
      });
    }
  });

  // 如果页面加载时图片已经全部加载完成，直接初始化
  if (loadedImgs === allImgs.length) {
    initMasonry();
  }
});

// 注意：动态插入新的li元素后，一定要重新调用initMasonry()，否则新元素不会正确排列

额外注意事项： #

• 你之前的img样式里width: auto容易导致列宽不一致，建议改成width: 100%让图片适配列宽，这样瀑布流排列更整齐
• 如果需要响应式布局，可以用媒体查询调整列数（比如移动端1列，平板2列），JS方案里也要同步修改columnCount的值

内容的提问来源于stack exchange，提问作者Jithin Raj P R