Why do the grid items in Isotope when using Packery vertically overlap each other?
Is it because they are dynamic in size? I.e., each Twitter feed item can be a different size after loading?
Or is there something wrong with the way I call imagesLoaded or Packery?
I can't get a code snippet to work here on SO, so here is a 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>
Well, imagesLoaded works with images, while your code loads twitter cards.
A workaround for this would be to use the twitter API
twttr.events.bind(
'loaded',
function (event) {
$grid.packery('layout');
}
);
But again, your code will have issues because you have set it to have 400px height, and the cards together with your text are taller than that. You can either remove the 400px height from both the CSS and the packery rowHeight or you could add overflow:hidden on the .grid-item