2

I'm using Packery to display a grid of images.

Here is my relevant HTML : 

<div class="items">         
    <div class="item" style="background-image: url(http://placehold.it/1000x1000)"></div>           
    <div class="item" style="background-image: url(http://placehold.it/1000x1000)"></div>           
    <!-- 12 times in total -->                      
</div>

Here is the CSS : 

.item{
    width: 25%;
    background-size: cover;
    height: 300px;
}

And finally the JS : 

$(function(){
    $('.items').packery();
});

My problem

When the page loads, here's what I get :

Notice the scrollbars, the grid is wider than the screen.

If I open the console, resize the browser window or do anything else to trigger a refresh, it will turn into this :

The horizontal scrollbar is gone, and there's no gutter between the items - it is now working as intended.

Why aren't the items properly placed in the first place? I looked at the documentation and some pen's/fiddle's that used the plugin, and I don't see what I am missing.

I tried delaying the initial call using setTimeout(), but it doesn't work - it only delays the time before I get what is shown in the first screenshot, I still have to resize the window or trigger the refresh manually before the items move into place.

Drown
  • 5,852
  • 1
  • 30
  • 49
  • Have you tried putting your function inside of `$(document).ready(function() { .... });` ? – Justin Jan 05 '16 at 01:08
  • @Justin Yes I did, I'm using $(function(){ .... }) to make sure everything has loaded before I'm initializing packery. – Drown Jan 05 '16 at 01:17
  • Are you sure that an anonymous function is working the same as `$(document).ready();`? Document.ready will make sure everything is loaded. An anonymous function won't wait for that. Also, the docs have their function looking a bit different than yours. Here is their function: `var $container = $('#container'); // init $container.packery({ itemSelector: '.item', gutter: 10 });` – Justin Jan 05 '16 at 01:22
  • @Justin Yes it's the same, I tried the full $(document).ready() for good measures and it's the same problem. And I'm using the same function as the doc, just not passing it any arguments. I tried a copy&paste of their code, but there's still the same problem – Drown Jan 05 '16 at 01:24
  • I tried putting your stuff into a fiddle, with a few changes: https://jsfiddle.net/q32auz3z/2/ – Justin Jan 05 '16 at 01:36
  • @Justin Thanks for the fiddle, as you can see when you resize the window you will the tiles move and fall into place. Is it alright with you if I update my question to include your fiddle? – Drown Jan 05 '16 at 02:16
  • Sure you can, but for me the blocks show up in the correct place. As you move the page around they do resize to continue fitting, but they also start out in the correct place. Is that not what you are seeing? – Justin Jan 06 '16 at 00:02

0 Answers0