我正在try 使用Lightbox js和基于砖石的 gallery
我连接了一切，添加了元素，2个视频和6个图像
输出时，一切正常，左边有2个视频，然后是图像
但由于某些原因，所有的设置都是这样的，视频和图像之间有太多的缩进
有没有可能让图像在视频之后立即显示，而没有这么大的间隙？
let masonryGrid = $('.masonry-grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
setTimeout(function() {
masonryGrid.masonry('layout')
}, 200);
setTimeout(function() {
masonryGrid.masonry('layout')
}, 1000);
setTimeout(function() {
masonryGrid.masonry('layout')
}, 3000);.masonry-grid {
margin: 30px 20px 20px;
}
.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;
}
.grid-item img {
width: 100%;
border-radius: 5px;
}
.grid-item iframe {
margin: 0 0 -5px;
width: 100%;
border-radius: 10px;
}
.grid-item--width2 {
width: 41%;
}<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" data-ma-sonry="{ 'itemSelector': '.grid-item'}" style="position: relative; height:640px;">
<div class="grid-item grid-item--width2 " style="position: absolute;">
<div><iframe src="https://youtube.com/embed/HXzB99HCru4/" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<div class="grid-item grid-item--width2 " style="position: absolute;">
<div><iframe src="https://youtube.com/embed/Jb6CBwreea8/" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<div class="grid-item" style="position: absolute;">
<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" style="position: absolute;">
<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" style="position: absolute;">
<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" style="position: absolute;">
<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" style="position: absolute;">
<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" style="position: absolute;">
<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>