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

Question

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

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

还是我调用imagesLoaded或Packery的方式有问题？

我无法在 SO 上使用代码片段，所以这里是 fiddle 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>

Answer 1

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

解决此问题的方法是使用 Twitter API

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

但同样，您的代码会出现问题，因为您已将其设置为 400 像素的高度，而卡片和您的文字都比这高。您可以从 CSS 和包装 rowHeight 中删除 400px 高度，或者您可以在 .grid-item

上添加 overflow:hidden

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

jQuery Isotope and Packery: grid items vertically overlap each other

jquery

jquery-isotope

packery