如何实现不同尺寸图片的该种排布效果？是否有对应jQuery插件？

你观察到的实现原理完全准确：这类固定容器高度、不同尺寸图片错落紧凑排布的效果，核心就是给图片设置absolute绝对定位，通过JS动态计算每张图的top、left偏移值实现，纯CSS无法完美适配任意尺寸图片的无缝填充需求，必须借助JS逻辑。

现成jQuery插件 #

直接用成熟插件不需要自己写计算逻辑，几个适配性最好的选项：

• jQuery CollagePlus：专门为图片拼贴排布设计的插件，天生适配固定高度容器场景，会自动按比例缩放图片、计算偏移值填充空隙，支持自定义图片间距、裁切规则，只需要给图片容器调用.collagePlus()方法即可完成初始化，和你要的效果匹配度最高
• 带jQuery封装的Masonry：不要用默认的竖向瀑布流配置，开启horizontalOrder参数、指定容器固定高度，就能实现横向填充的错落排布效果，兼容性最好，社区资料全
• jQuery Gridly：除了基础的自动排布，还支持拖拽调整图片位置、点击放大等交互功能，如果需要额外交互可以选这个

手动实现核心逻辑 #

如果不想引入插件，可以按以下逻辑自己写，代码量不大：

1. 给父容器设置基础样式：position: relative、固定高度、overflow: hidden避免图片溢出
2. 等待所有图片加载完成，拿到每张图的原始宽高比，按设定的行高/容器高度等比缩放图片，算出每张图缩放后的实际显示宽度
3. 遍历图片队列，逐行判断剩余空间是否能放下当前图片：能放下就设置对应top、left值塞到当前行，放不下就换行重置行起始位置
4. 如果需要更紧凑的无空隙效果，只需要在放置图片时增加最优位置判断，优先找能放下图片、剩余空隙最小的位置即可

最简化的基础排布代码参考：

const $imgContainer = $('.pic-wrap');
const FIXED_ROW_HEIGHT = 380; // 设定的固定行高/容器高度
$imgContainer.css({
  position: 'relative',
  height: FIXED_ROW_HEIGHT,
  overflow: 'hidden'
});

// 等所有图片加载完成后执行排布
$imgContainer.imagesLoaded(function() {
  let currentLeft = 0;
  let currentTop = 0;
  let rowRemainWidth = $imgContainer.width();

  $imgContainer.find('img').each(function() {
    const $curImg = $(this);
    // 按固定高度等比计算图片缩放后的宽度
    const scaledWidth = (this.naturalWidth / this.naturalHeight) * FIXED_ROW_HEIGHT;
    
    // 当前行剩余宽度不足时换行
    if (scaledWidth > rowRemainWidth) {
      currentTop += FIXED_ROW_HEIGHT;
      currentLeft = 0;
      rowRemainWidth = $imgContainer.width();
    }

    // 给图片设置定位属性
    $curImg.css({
      position: 'absolute',
      top: currentTop,
      left: currentLeft,
      height: FIXED_ROW_HEIGHT,
      width: scaledWidth
    });

    // 更新行占用宽度
    currentLeft += scaledWidth;
    rowRemainWidth -= scaledWidth;
  });
});

上面的代码是最基础的逐行排布逻辑，如果需要更紧凑的拼贴效果，只需要调整位置判断规则即可，核心逻辑和成熟插件一致。

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