如何消除Lightbox JS与Masonry图库中视频和图片的过大间距？

你的布局问题核心原因在于手动定位干扰Masonry逻辑、元素尺寸计算不匹配、媒体高度未提前定义，导致布局时出现多余间隙。以下是针对性修复方案：

关键修复步骤 #

1. 移除手动定位：删掉每个.grid-item上的style="position: absolute;"，Masonry会自行处理元素定位。
2. 统一盒模型：添加box-sizing: border-box，确保padding包含在元素宽度内，避免列宽溢出。
3. 固定视频比例：用16:9比例容器包裹iframe，让Masonry初始化时就能获取准确高度。
4. 修正列宽匹配：调整双列视频的宽度，使其与两个单列图片的宽度总和一致，消除间隙。
5. 优化布局触发：替换重复的setTimeout，改用媒体加载完成事件触发布局，保证尺寸计算准确。

修改后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="masonry-grid">
    <div class="grid-item grid-item--width2">
        <div class="video-wrapper"><iframe src="https://youtube.com/embed/HXzB99HCru4/" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    <div class="grid-item grid-item--width2">
        <div class="video-wrapper"><iframe src="https://youtube.com/embed/Jb6CBwreea8/" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    <div class="grid-item">
        <div><a href="https://i.imgur.com/xPZSJ3n.jpg" data-lightbox="image-1" data-title="Image 1"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a href="https://i.imgur.com/vebNRcv.jpg" data-lightbox="image-1" data-title="Image 2"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a href="https://i.imgur.com/d9cmnm9.jpg" data-lightbox="image-1" data-title="Image 3"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a href="https://i.imgur.com/xPZSJ3n.jpg" data-lightbox="image-1" data-title="Image 4"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a href="https://i.imgur.com/vebNRcv.jpg" data-lightbox="image-1" data-title="Image 5"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a href="https://i.imgur.com/d9cmnm9.jpg" data-lightbox="image-1" data-title="Image 6"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
    </div>
    <div class="grid-sizer"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.js" integrity="sha512-MBa5biLyZuJEdQR7TkouL0i1HAqpq8lh8suPgA//wpxGx4fU1SGz1hGSlZhYmm+b7HkoncCWpfVKN3NDcowZgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CSS #

* {
  box-sizing: border-box;
}

.masonry-grid {
  margin: 30px 20px 20px;
  position: relative;
}
.grid-item, .grid-sizer {
  float: left; 
  width: 20%;
  padding: 10px;
}
.grid-item div {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 blue;
  overflow: hidden;
}
.grid-item img {
  width: 100%;
  border-radius: 5px;
}
.grid-item--width2 {
  width: 40%;
}

/* 视频容器比例控制 */
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 宽高比 */
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

JavaScript #

let masonryGrid = $('.masonry-grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

// 图片和视频加载完成后重新布局
$('.grid-item img, .grid-item iframe').on('load', function() {
  masonryGrid.masonry('layout');
});

// 初始化后延迟布局，兼容加载较慢的媒体
setTimeout(() => {
  masonryGrid.masonry('layout');
}, 500);

修复说明 #

• 盒模型设置：box-sizing: border-box让元素padding不额外增加宽度，保证20%列宽计算准确。
• 视频比例容器：通过padding-top:56.25%固定16:9比例，Masonry初始化时就能获取正确高度，避免布局错位。
• 列宽匹配：.grid-item--width2设为40%，正好是两个单列元素宽度总和，消除视频与图片间的多余间隙。
• 动态布局触发：监听媒体加载事件，确保所有内容加载完成后再计算布局，避免因未加载完成导致的尺寸错误。

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