virtual-scroller(中) 

<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <style type="text/css">
        .viewpoint {
            margin: 20px auto;
            width: 380px;
            height: 200px;
            border: 1px solid #333;
            overflow-y:scroll;
        }
        .canvas {
            position: relative;
            height: 20000px;
        }
        .row {
            position: absolute;
            height: 10px;
            line-height: 10px;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
    <div class="viewpoint">
        <div class="canvas"></div>
    </div>
    <div class="log"></div>
    <script>
        var lineHeight = 10, viewpointHeight = 200, limit = Math.ceil(viewpointHeight/ lineHeight);
        var data = new Array(2000).fill(0).map((d, i) => ({ v: i }));

        var buffer = {
            start: 0,
            end: limit,
            limit: limit,
            total: data.length,
            domain:[0, limit],
            isAmong(index) {
                return buffer.start <= index && index <= buffer.end;
            },
            preLoad(dir, current) {
                if (dir === 0) return false;

                var start = buffer.start;
                var end = buffer.end;

                // scroll up
                if (dir < 0 && start === 0) return false;
                if (dir < 0 && current < Math.max(0, start + buffer.limit)) {
                    end = Math.max(buffer.isAmong(current) ? start : current, buffer.limit);
                    start = Math.max(0, end - buffer.limit);

                    buffer.domain = [start, end];
                    buffer.start = start;
                    buffer.end = Math.min(start + 3 * buffer.limit, buffer.end);
                    return true;
                } 

                // scroll down
                if (dir > 0 && end === buffer.total) return false;
                if (dir > 0 && current > end - buffer.limit) {
                    start = buffer.isAmong(current) ? end : current;
                    end = Math.min(buffer.total, start + buffer.limit);

                    buffer.domain = [start, end];
                    buffer.end = end;
                    buffer.start = Math.max(buffer.start, end - 3 * buffer.limit);
                    return true;
                }
                
                return false;
            }
        };
        var scroller = { 
            dir: 0, // -1,0,-1
            preIndex: 0,
            index: 0,
            on(fn) {
                this.fn = function(offsetTop) {
                    log('current', offsetTop);
                    scroller.dir = offsetTop - scroller.preIndex;
                    scroller.index = ~~((scroller.preIndex = offsetTop)/ lineHeight);
                    if (buffer.preLoad(scroller.dir, scroller.index)) {
                        fn(
                            scroller.dir > 0 ? 1 : -1, 
                            buffer.domain, 
                            buffer.start, 
                            buffer.end, 
                            scroller.index,
                            buffer.total
                        );
                    }
                };
            }, 
            fire() {this.fn.apply(this, arguments);} 
        };

        var dataView = {
            nodeList: [],
            fullNodes() {
                return dataView.nodeList.length >= 3 * limit;
            },
            getNodes(dir, first, last) {
                if (dataView.fullNodes()) {
                    let selected;

                    if (dir > 0) {
                        selected = dataView.nodeList.slice(0, last - first);
                        dataView.nodeList = dataView.nodeList.slice(last - first + 1).concat(selected);
                        
                    } else {
                        selected = dataView.nodeList.slice(first - last);
                        dataView.nodeList = selected.concat(dataView.nodeList.slice(0, first - last - 1));
                    }
                    
                    return selected;
                }
                
                var nodes = [];
                for (let i = first; i <= last; i++) {
                     nodes.push(function() {
                          var $node = $('<div/>').addClass('row');
                          return function(row, top) {
                              return $node.css('top', top * lineHeight).text(row.v);
                          }
                     }());
                }

                if (dir > 0) {
                    dataView.nodeList = dataView.nodeList.concat(nodes);
                } else {
                    dataView.nodeList = nodes.concat(dataView.nodeList);
                }

                return nodes;
            },
            render(dir, [first, last], start, end) {
                var nodes = dataView.getNodes(dir, first, last);

                if (dataView.isFullNodes) {
                    data.slice(first, last).forEach((row, i) => {
                        nodes[i](row, first + i);
                    });

                    return;
                }
                var parent = $('<div/>');

                data.slice(first, last).forEach((row, i) => {
                    parent.append(nodes[i](row, first + i));
                });

                $('.canvas').append(parent.children());

                if (dataView.fullNodes()) {
                    dataView.isFullNodes = true;
                }        
            }
        };
        

        document.querySelector('.viewpoint').addEventListener('scroll', function(evt) {
            // console.log(this.scrollTop);
            scroller.fire(this.scrollTop);
        });

        scroller.on(function(dir, domain, start, end, offsetTop, total) {
            console.log(`${dir}, add:[${domain}] [${start}-${end}], ${offsetTop}, nodes:${dataView.nodeList.length}`);
            dataView.render(dir, domain, start, end);
        });


        var $log = document.querySelector('.log');
        function log(...args) {
            $log.innerHTML = args;
        }
    </script>
</body>
</html>

 

posted @ 2017-07-29 22:55  风之约  阅读(333)  评论(0)    收藏  举报