germanysbestkeptsecret / Wookmark-jQuery

A jQuery plugin to create a dynamic, multi-column layout.
MIT License
2.63k stars 759 forks source link

Layout problem when loading wookmark formatted content #145

Closed carlos1001 closed 10 years ago

carlos1001 commented 10 years ago

I have a strange problem with the layout when the list that is to be wookmarked is loaded dynamically through an ajax call. So let's assume there is a div that is being filled by a jQuery "load()" call. A script simply delivers a list that should be formatted by wookmark after loading:

$("#parent").load("ajax.func.php?action=getcontent", function() {

                    (function ($){
                        $("#list li").wookmark({
                                        // Prepare layout options.
                                        autoResize: true, // This will auto-update the layout when the browser window is resized.
                                        container: $('#parent'), // Optional, used for some extra CSS styling
                                        offset: 5, // Optional, the distance between grid items
                                        outerOffset: 10, // Optional, the distance to the containers border
                                        itemWidth: 210 // Optional, the width of a grid item
                                    });
                       })(jQuery);

                       $(this).append('<div style="clear:both;"></diV>'); // does not help unfortunately

});

The list is being wookmarked however the items are overlapping each other and the container div 'parent' is being overflowed by the content.

Now, the strange thing is that it only happens the first time it is loaded within the browser. When reloading the page it is shown without any formatting problems. What can be the reason for it? Same thing with Firefox as well as Chrome.

By the way, same thing happens with mansory.

Sebobo commented 10 years ago

Hi,

you have to use the imagesLoaded plugin like in some of the examples. This will wait for the images in your items to load, so the Plugin is able to get the correct height for the elements. Or you set your image width and height attributes correctly, this should fix this too. When loading the second time, the browser has the images cached, so the problem show again.

carlos1001 commented 10 years ago

Thanks, that makes sense. Will try!