title: Infinite Scrolling with wookmark plugins scrolling
body: <p>With ref. to above subject, I am using wookmark plugin to scroll our home page data dynamically….I have studied the tutorial provided on wookmark and I m using the exact script provided by wookmark and working fine shorts of not 100% working.
  Things it stucks when it reaches at bottom of the window then we slightly press the up arrow key, that loads the products again and this is happens randomly some time it scrolls perfectly and some time it stucks and if presses up arrow key it starts working again.</p>
  
  <p>Kindly help me out where I m going wrong. Kindly provide me the easy working script for the same.</p>
  
  <p>I m using following code :</p>
  
  <pre><code>  (function ($) {
        $('#main').imagesLoaded(function () {
            var handler = null;
  
            // Prepare layout options.
            var options = {
                itemWidth: 200, // Optional min width of a grid item
                autoResize: true, // This will auto-update the layout when the browser window is resized.
                container: $('#main'), // Optional, used for some extra CSS styling
                offset: 20, // Optional, the distance between grid items
                outerOffset: 20, // Optional the distance from grid to parent
                flexibleWidth: 300 // Optional, the maximum width of a grid item
            };
  
            function applyLayout() {
                $('#main').imagesLoaded(function () {
                    // Destroy the old handler
                    if (handler.wookmarkInstance) {
                        handler.wookmarkInstance.clear();
                    }
  
                    // Create a new layout handler.
                    handler = $('#display li');
                    handler.wookmark(options);
                });
                handler.wookmark(options);
            }
  
            /**
            * When scrolled all the way to the bottom, add more tiles.
            */
            function onScroll(event) {
                // Check if we're within 100 pixels of the bottom edge of the broser window.
                var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
                //var closeToBottom = ($(window).scrollTop() &gt;= $((document)).height() - $((window)).height() - $("#footer").height() - 500); //(($(window).scrollTop() - 100)); //+ "%"
                var closeToBottom = ($(window).scrollTop() + winHeight &gt; $(document).height() - 100);
  
                if (closeToBottom) {
                    // Get the first then items from the grid, clone them, and add them to the bottom of the grid.
                    var items = $('#display li'),
                    firstTen = items.slice(0, 10);
                    //$('#display').append(firstTen.clone());
  
                    applyLayout();
                }
            };
  
            // Capture scroll event.
            $(window).bind('scroll', onScroll);
  
            // Call the layout function.
            handler = $('#display li');
            handler.wookmark(options);
        });
  
        $(window).load(function () {
            handler.wookmark(options);
        });
    })(jQuery);
  </code></pre>