分页转瀑布

1.问题：
         在网页中，一个页面展示多个商品自然涉及到分页，量多分页是必然的，但互联网千变万花，于是出现了所谓的瀑布流现象，个人并没有去认真研究，个人理解就是，在滚动条一直下拉的同时，向可是区域一直填充数据，直到请求数据完或者期望的结束。
            自己所做的需求本以功能完成，结果产品变更要求分页变为瀑布流，在没有研究瀑布流的情况下，自己设想着做了，于是呼，一个晚上和一个上午的时间搞定。
2.思路：
            a. 设一页拉取10个数据，但滚动条拉取到底部时异步向后台从新拉取数据，拉取成功后合并当前页面中已有数据在填如当前页面。
            b.涉及的动作：进入页面即拉取第一页展示；拉取滚动条一定程度时发动异步请求第二页数据；后台返回数据成功后再填充页面……
            c.要求数据有序显示，滚动到什么程度时拉取，确保拉过的数据勿重复，不漏拉取数据
           其实，比较关键的问题是，页码在什么时间递增，确保什么时候数据拉完。
           

(function(ns){
    //判断滚动条滚动位置
    var SCROLL = {
        isEnd : false,
        curPage : 1,
        totalPage : 1,
        isCroll : function(){
            //get something here
            return clientHeight + scrollTop >= scrollHeight - 400;//400为经验值
        }
    }
    
    //拉取数据成功回调函数
    function getDataSuccess(data){
        //do something here
        SCROLL.totalPage = data.iTotalPage;
        if(data.iPageIndex >= data.iTotalPage){
            SCROLL.isEnd = true;
        }
    };
    
    //分页拉取数据
    function getCurPageDataByAjax(curPage, getDataSuccess){
        //do something here
    };
    
    //监听window的滚动事件
    addEvent(global, 'scroll', function() {
        if(SCROLL.isCroll() && SCROLL.isEnd) {                            
            SCROLL.curPage++;                                
            if(SCROLL.curPage > SCROLL.totalPage){
                SCROLL.isEnd = false;
                SCROLL.totalPage = 1;
            }
            else{
                getCurPageDataByAjax(SCROLL.curPage,getDataSuccess);
            }
        }
    });
    //一开始拉取一次数据
    getCurPageDataByAjax(1, getDataSuccess);
})(window);