virtual-list-view-js

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="listContainer"></div>

CSS

BODY { padding: 40px; }

#listContainer {
    width: 200px;
    height: 500px;   
    border: 1px dotted #fcc;
}

.vlv-container {
    position: absolute;
    overflow-x: hidden;
    overflow-y: scroll;
    /* debug */
    background-color: #fee;
}

.vlv-content {
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /* debug */
    background-color: #eef;
}

JavaScript

// test data
var testData = [],
    selected = [],
    bgcolors = ['#fcc','#ffc','#cff','#cfc'],
    size = 200;

for(var i=0; i<size; i++) {
    testData.push({ id: i, label: "list item " + i, selectable: true });
}

// test data source
var listDataSource = {
    /* contentSource methods */
    contentForRowAtIndex     :  function getContentForItem(index) {
                                    var randomHeight = 20 + Math.round(50 * Math.random()),
                                        randomBackground = bgcolors[Math.round(4 * Math.random())],
                                        e = $('<div class="vlv-content"' +
                                              'style="height:' + randomHeight + 
                                              'px;font-family:Helvetica;padding:5px;background-color:' +
                                              randomBackground + ';"></div>')[0];
                                    e.textContent = testData[index].label;
                                    return e;
                                },
    
    numberOfRows             :  function() { return testData.length; },

    /* delegate methods */
    onSelectRow              : function(index, element) { 
                                    selected[index] = true;
                                    element.innerHTML += " (clicked)";
                                    element.style.backgroundColor = "#f66";
                               }
}




function jsvlv(width,height,contentSource,delegate) {
    
    var _i = this,   
        _el = null,
        _elId = ("vlv" + Math.round(Math.random() * 1000000)), 
        _t = '<div id="<%= id %>" class="vlv-container"' +
             ' style="width:<%=width %>px;height:<%=height %>px;"></div>',
        _$el = $(_.template(_t, { id: _elId, width: width, height: height })),
        _el = _$el[0],
        _content = $('<div class="vlv-content"></div>')[0],          
        _viewportItems = [],
        _viewportStartIndex = 0,
  ...