jQuery Isotope 和 Packery：网格项目相互垂直重叠答案

【问题标题】：jQuery Isotope and Packery: grid items vertically overlap each otherjQuery Isotope 和 Packery：网格项目相互垂直重叠
【发布时间】：2021-12-24 03:55:41
【问题描述】：

为什么使用 Packery 时 Isotope 中的网格项会垂直重叠？

是因为它们的大小是动态的吗？即，每个 Twitter 提要项在加载后可以有不同的大小？

或者我打电话给imagesLoaded 或Packery 的方式有什么问题？

我无法让代码 sn-p 在 SO 上工作，所以这是一个小提琴 https://jsfiddle.net/e9bdjf3z/1/

jQuery

$( document ).ready(function() {
var $grid = $('.grid').imagesLoaded( function() {
$('.grid').packery({
itemSelector: '.grid-item',
rowHeight: 400,
});
});
});

CSS

/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}

.grid-item {
float: left;
width: 300px;
height: 400px;
}

.widget-div {
border: 1px solid #c2c2c2;
}

HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
    <script async src="https://platform.twitter.com/widgets.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.2/packery.pkgd.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/isotope-packery@2.0.1/packery-mode.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
        
        <div class="grid">
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">1<br />
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/TheEconomist?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">2<br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/nytimes?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">3<br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/washingtonpost?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">4<br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/sfchronicle?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">5<br />
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/latimes?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">6<br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/ch?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">7<br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/seattletimes?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/portlandorbuzz?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/miaminewsnow?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        <div class="grid-item">
        <div class="widget-div">
        <div class="text-div">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="twitter-div">
        <a class="twitter-timeline" data-width="300" data-height="400" data-theme="light"
        data-tweet-limit="1" data-chrome="transparent nofooter noheader noborders" href="https://twitter.com/AtlNewsNow?ref_src=twsrc%5Etfw">Tweets</a>
        </div>
        </div>
        </div>
        
        </div>
        </div>

【问题讨论】：

标签： jquery jquery-isotope packery

【解决方案1】：

好吧，imagesLoaded 处理图片，而您的代码加载推特卡片。

解决方法是使用 twitter API

twttr.events.bind(
  'loaded',
  function (event) {
    $grid.packery('layout');
  }
);

但同样，您的代码会出现问题，因为您已将其设置为 400 像素高度，并且卡片与您的文字一起比这更高。您可以从 CSS 和包装 rowHeight 中删除 400px 高度，也可以在 .grid-item 上添加 overflow:hidden

【讨论】：

谢谢，在我从 .grid-item 中删除宽度后，您的 twttr.events.bind 函数可以修复项目重叠。但是我现在在左对齐的项目下获得了空间； “打包”由于某种原因不起作用。
@BlueDogRanch 你能在当前状态下发布一个小提琴吗？
这是一个更新的小提琴jsfiddle.net/h8o7jmen
@BlueDogRanch 您已删除打包初始化。试试this jsfiddle
啊，这行得通；我的错！