jq手写瀑布流、兼容性问题、分页涉及到的返回定位

移动端项目有一个功能是要展示很多列表，需要分页展示，虽然之前用过better-scroll插件，但是这次我想自己写，看似简单，实则很多细节需要处理。

首先在获取滚动轴高度、文档高度、屏幕可视区域高度时出现兼容问题：

//滚动轴高度
var scrollTop = $(document).scrollTop() || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//文档高度
var scrollMinuend = document.documentElement.scrollHeight || $(document).height();
//可视区域高度
var scrollSubtract = window.innerHeight || $(window).height();

主要逻辑是：达到一个临界条件就再次获取数据，这个条件是

scrollTop + scrollSubtract >= scrollMinuend

出现的一些问题：

1. “~底线”多次出现，我想了想元素拼接的代码逻辑没问题，应该是多次发起了ajax请求，所以得用“锁”来控制：

//初始设为false，允许发请求
var ajaxFlag = false;  
function scrolls() {
            //如果为true说明已经有请求在发送了，不允许再次发送
            if (ajaxFlag) {
                return;
            }
            var scrollTop = $(document).scrollTop() || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            var scrollMinuend = document.documentElement.scrollHeight || $(document).height();
            var scrollSubtract = window.innerHeight || $(window).height();
            if (scrollTop + scrollSubtract >= scrollMinuend) {
                $('.load').css({
                    'display': 'block',
                    'position': 'fixed'
                });
                //发送请求前将锁锁上
                ajaxFlag = true; 
                pageNum += 1;
                ajaxFun(pageNum, conNum, sDate, eDate, productClassify, productName, conNr, state, listJion);
            }
        }

该请求处理完后将ajaxFlag 设为false。
2) 我这个项目里还有一个查询功能，所以除了正常的滑动查询外，还要兼顾查询来“捣乱”，每次查询都要将变量“洗牌”，例如将pageIndex重置为1，将页面清空再添加新元素，每次请求时要带着筛选条件进行请求。。。
3) 当无数据时要禁止onscroll事件
（代码放在最后）

每项点进去详情页再返回时要定位在原位置，如果没有分页那就太简单了，只需要滚动轴的高度值，现在有分页，就要多考虑了。

刚开始我想着把滚动轴的高度值tops和页面数page放入sessionStorage中，返回页面时多次请求数据。

后来我想数据量不大直接把请求到的数据以及筛选条件都放入sessionStorage中，

function bindClick(ele) {
            planNum = $(ele).attr('data-plannum');
            lineId = $(ele).attr('data-lineid');
            tops = window.scrollY;
            sessionStorage.setItem('tops', tops);
            sessionStorage.setItem('pageNum', pageNum);
            sessionStorage.setItem('sDate', sDate);
            sessionStorage.setItem('eDate', eDate);
            sessionStorage.setItem('productClassify', productClassify);
            sessionStorage.setItem('productName', productName);
            sessionStorage.setItem('conNr', conNr);
            sessionStorage.setItem('state', state);
            sessionStorage.setItem('pageData', JSON.stringify(pageData));
            location.href = 'productWoodInfo.html?PlanNum=' + planNum + '&LineId=' + lineId;
        }

页面初始化的时候再取回来，

function topData() {
            tops = sessionStorage.getItem('tops') ? parseInt(sessionStorage.getItem('tops')) : parseInt(0);
            pageNum = sessionStorage.getItem('pageNum') ? parseInt(sessionStorage.getItem('pageNum')) : parseInt(0);
            sDate = sessionStorage.getItem('sDate') ? sessionStorage.getItem('sDate') : '';
            eDate = sessionStorage.getItem('eDate') ? sessionStorage.getItem('eDate') : '';
            productClassify = sessionStorage.getItem('productClassify') ? sessionStorage.getItem('productClassify') : 'all';
            productName = sessionStorage.getItem('productName') ? sessionStorage.getItem('productName') : '';
            conNr = sessionStorage.getItem('conNr') ? sessionStorage.getItem('conNr') : '';
            state = sessionStorage.getItem('state') ? sessionStorage.getItem('tops') : '0';
            pageData = sessionStorage.getItem('pageData') ? JSON.parse(sessionStorage.getItem('pageData')) : [];
        }

注意，当初始化渲染完页面后，要把sessionStorage清除掉，否则你会发现不管是从别的页面进入还是刷新都是原来的数据

sessionStorage.clear();  //如果取不存在的键返回null

下面是瀑布流的主要代码
DOM

<div class="container" style="padding-right:0px;padding-left:0px;padding-top:55px;padding-bottom:10px">
     <div class="box"></div>
     //加载动画
     <div id='loading' class="load"><img src='img/zhao_loading.gif' /></div>
</div>

javascript

function ajaxFun(pageNum, conNum, sDate, eDate, productClassify, productName, conNr, state, callBack) {
            $.ajax({
                url: 'xxxxxxx',
                type: 'post',
                data: {
                    action: 'GetListWood',
                    UserID: localStorage.UserCode,
                    Pageindex: pageNum,
                    pagesize: conNum,
                    Sdate: sDate,
                    Edate: eDate,
                    OType: productClassify,
                    ItemName: productName,
                    Connr: conNr,
                    DocStatus: state
                },
                success: function (data) {
                    if (data !== '') {
                        var jsData = JSON.parse(data);
                        if (jsData.length == 0) {
                            $(window).off('scroll');
                            //没有符合查询条件的数据，则把页面清空
                            if (pageNum == 1) {
                                oBox.children().remove();
                            }
                            infoJion();
                        } else {
                           //如果已经翻到页面最后停掉滚动事件，则再查询的时候数据大于一页要开启滚动
                            if (lock && jsData.length >= conNum) {
                                $(window).on('scroll', scrolls);
                            }
                            if (pageNum == 1) {
                                $(document).scrollTop(0);
                            }
                            callBack(jsData);
                        }
                        lock = false;
                        $('.load').css('display', 'none');
                        pageData = pageData.concat(jsData);
                        ajaxFlag = false;
                    } else {
                        alert('数据查询有误！')
                    }   
                },
                error: function (xhr, errorText, errorType) {
                    $('.load').css('display', 'none');
                    alert(errorText + ' ' + errorType);
                }
            })
        }
        //没有数据的时候拼接提示信息
        function infoJion() {
            var html = '';
            html += '<p>~~底线~~</p>';
            oBox.append(html);
        }