Page layout breaks on page refresh using F5

Question

I am using jQuery Wookmark in my website ...everything works fine...but when i refresh the page the page layout breaks....why??

Correct Layout

Wrong layout after page refresh using F5

Why does this happen?? After page reload this happens...any idea why??

JS

 <script type="text/javascript" src="js/jquery.wookmark.js"></script>

    <!-- Once the page is loaded, initalize the plug-in. -->

    <script type="text/javascript">
        var handler = null;
        var pageIndex = 1;
        var pageCount;
        var isLoading = false;
        var apiURL = 'Haggler.asmx/GetCategories'

        // Prepare layout options.
        var options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#tiles'), // Optional, used for some extra CSS styling
            offset: 17, // Optional, the distance between grid items
            itemWidth: 190 // Optional, the width of a grid item
        };

        /**
        * When scrolled all the way to the bottom, add more tiles.
        */
        function onScroll(event) {
            // Only check when we're not still waiting for data.
            if (!isLoading) {
                // Check if we're within 100 pixels of the bottom edge of the broser window.
                var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
                if (closeToBottom) {
                    loadData();
                }
            }
        };

        /**
        * Refreshes the layout.
        */
        function applyLayout() {
            // Clear our previous layout handler.
            if (handler) handler.wookmarkClear();

            // Create a new layout handler.
            handler = $('#tiles li');
            handler.wookmark(options);
        };

        /*
        * Loads data from the API.
        */
        function loadData() {
            isLoading = true;

            if (pageIndex == 1 || pageIndex <= pageCount) {
                $('#loaderCircle').show();

                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: apiURL,
                    dataType: 'json',
                    data: '{pageIndex:' + pageIndex + '}', // Page parameter to make sure we load new data
                    success: function(data) {
                        //alert("SSS");
                        isLoading = false;
                        $('#loaderCircle').hide();

                        // Increment page index for future calls.
                        pageIndex++;

                        // Create HTML for the images.
                        var html = '';
                        pageCount = data.d[1].PageCount;
                        var i = 0, length = data.d.length, image;
                        //alert(JSON.stringify(data.d));
                        //                      image = data.d[1];
                        //                      alert(image.height);
                        for (; i < length; i++) {

                            image = data.d[i];
                            //alert(image.height);
                            html += '<li class="polaroid"><div class="optionbg"></div><div class="optionback"><span>' + data.d[i].NodeName + '</span></div><div class="options"><span class="favs">14</span><span class="fav">like it!</span></div><a href="http://www.google.co.in"><img src="' + image.image + '" width="180" height="' + Math.round(image.height / image.width * 180) + '"></a></li>';

                        }
                        // Add image HTML to the page.
                        $('#tiles').append(html);

                        // Apply layout.
                        applyLayout();
                    },
                    error: function(result) {
                        //alert(JSON.stringify(result));
                    }
                });

            }


        };

        /**
        * Receives data from the API, creates HTML for images and updates the layout
        */


        $(document).ready(new function() {
            // Capture scroll event.
            $(document).bind('scroll', onScroll);

            // Load first data from the API.
            loadData();
        });
    </script>

Answer 1

wrap you code inside

$(document).ready(function () {
//your code
}

It calls your code every time your page reloads. Hope it helps.