I've successfully implemented a packery image grid that is responsive and functional when the background image in the .item-content section is defined in the CSS file: http://codepen.io/anon/pen/eJdapq
.item-content {
width: 100%;
height: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg);
border: 4px solid #333;
border-color: hsla(0, 0%, 100%, 0.4);
-webkit-transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-o-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
}
However, when attempting to dynamically add items into the grid through JavaScript/jQuery upon page load instead of hardcoding HTML elements like this:
<div class="packery" id="packery">
</div>
It seems that the images are added to the left side of the page rather than being properly placed within the grid. Do you have any suggestions on how to resolve this issue?
Upon further investigation, I noticed that when adding more hardcoded DOM items and not just images loaded through JavaScript, the grid overshadows the images if it becomes large enough. My suspicion is that packery is initialized before all the images are added to the DOM.
Is there a way to make packery wait until all my HTML elements are fully initialized before rendering the grid?