jquery-vs-repeat v0.0.1

Virtual Scroll plugin for jQuery

EXAMPLE: Make sure to check out the DOM via developer tools!

DESCRIPTION:

vsRepeat stands for Virtual Scroll Repeat. It turns a standard scrollable container into a component, where the user thinks he has all the elements rendered and all he needs to do is scroll (without any kind of pagination - which most users loath) and at the same time the browser isn't overloaded by that many elements. The plugin renders only so many elements that can fit into current container's clientHeight/clientWidth.

USAGE:

<div id="container">
    <div class="item">
        <div>
            #text#
        </div>
        <div>
            <small>
                #description#
            </small>
        </div>
    </div>
</div>

var data = [
    {"text": "item 1", "description": "description 1", "size": "35"},
    {"text": "item 2", "description": "description 2", "size": "40"},
    {"text": "item 3", "description": "description 3", "size": "50"},
    {"text": "item 4", "description": "description 4", "size": "35"},
    {"text": "item 5", "description": "description 5", "size": "40"}
];
$('#container').vsRepeat({
    data         : data,        // required
    offsetBefore : 50,          // optional
    offsetAfter  : 50,          // optional
    excess       : 0,           // optional
    sizeProperty : 'size',      // optional
    direction    : 'horizontal',// optional (default: vertical)
    onRender     : function(element, index, startIndex, endIndex){
        if((index + startIndex) % 2)
            element.css('background', 'gray');
    }
});

The sizeProperty is optional along with the actual size property in data array. If provided the plugin assumes, that's the element height/width. If not all items are assumed to have the same height/width.

The 'onRender' function is also optional. If provided the plugin will call it for each element when it gets rendered into the DOM with the following arguments:

• element - the jQuery object of that element,
• index - the index of the element in the current subset of the array
• startIndex - the index of the first rendered item
• endIndex - the index of the first item that is NOT rendered

NOTE: the actual index of the element in the original data array is startIndex + index.

IMPORTANT: if you are using AngularJS in your project please use my angular-vs-repeat library.