Tiles overlap even with imagesLoades on first load of page, they stop overlaping when i scroll down.

[jorgegil96]

I was experiencing the issue where the tiles overlaped after loading, and after adding the imagesloaded plugin they still overlap when i load the page for the first time, but if i scroll down (i'm using endless scroll) it fixes it, it also get's fixed if i click on a link that sends me to the same page or press enter on the adress bar. But if i click the refresh the problem appears again.

[jorgegil96]

I just realized it's a height issue, i'm pulling images from an API like in the example provided. In this line: html += ' img src="uploads/'+image.image_0+'" width="100%" height=" ? "'; How do i calculate the height? If i leave it blanck then the tiles overlap each other, but i cant use this: height="'+Math.round(image.height/image.width*?)+'" because i don't know what to put in the ? since i don't know the width yet.

[ehrereich]

I also am having the same problem of overlapping which can be temporily fixed by resizing the window after a complete page loading. I would really like to know how can I get rid of this overlapping thing. I mainly use the plugin for laying out a dynamic grid of divs (not necessarily images).

[GBKS]

If window resizing fixes or scrolling it, then the issue is 100% related to the height not being calculated when the plug-in lays out the tiles. Most likely, the imagesLoaded function is called too early, so it doesn't update the layout whenever an image is done loading. Try logging the order in which you add content to the page, call imagesLoaded and update the layout, to make sure they happen in the right sequence.

[ehrereich]

Thanks for the insight. In my case, it doesn't not fix with scrolling. (Only with resizing.) One of the features I really like and which I use in this is automatic heights for the divs. The contents of these divs are also dynamically populated from a MySQL (MariaDB) database. I made sure the normal order is set but still unsuccessfull.

[Sebobo]

@jorgegil96 Does it work if you do not set the width and height of your images? And it would be helpful if you provide your setup code for Wookmark.

[ehrereich]

Can auto refresh in Wookmark after complete loading of the page resolve the problem?

If it might be helpful, here is a preview of the Wookmark configuration code that I use.

 <script type="text/javascript">
            (function ($){
                $('.ak_items_blog').imagesLoaded(function() {
                    // Prepare layout options
                    var options = {
                        itemWidth: 150, // Optional min width of a grid item
                        autoResize: true, // This will auto-update the layout when the browser window is resized.
                        container: $('.ak_items_blog'), // Optional, used for some extra CSS styling
                        offset: 10, // Optional, the distance between grid items
                        outerOffset: 10, // Optional the distance from grid to parent
                        flexibleWidth: '100%', // Optional, the maximum width of a grid item
                        fillEmptySpace: false, // Optional, fill the bottom of each column with widths of flexible height
                        //ignoreInactiveItems: true,
                        align: 'left',
                        resizeDelay: 5
                    };

 // Get a reference to your grid items.
                    var handler = $('.item_box');

                    var $window = $(window);
                    $window.resize(function() {
                        var windowWidth = $window.width(),
                            newOptions = { flexibleWidth: '50%' };
                        // Breakpoint
                        if (windowWidth < 1024) {
                            newOptions.flexibleWidth = '100%';
                        }
                        handler.wookmark(newOptions);
                    });
                    // Call the layout function.
                    handler.wookmark(options);
                });
                $('.item_box').trigger('refreshWookmark');
            })(jQuery);
        </script>

[Sebobo]

I guess the height of your elements is not final before the plugin is run. This can be related to certain css properties or other js influencing the items.

The position of your refresh trigger call may not work like that, because the imagesLoaded callback is asynchronous and the order of execution might be different. So you should put the refresh after the handler.wookmark(options) line.

You could also try to wrap your code in the jQuery document ready callback like this:

(function ($){
    $(function() {...});
})(jQuery);