JavaScript+NodeJS+mongonDB实现瀑布流加载

1.前端js文件

     //获取滚动条到顶端的高度

     function getScrollTop() {

        var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;

    }

     //获取滚动条的高度（固定值，不随滚动条改变）

    function getScrollHeight() {
        var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;

    }

     //获取windows视窗高度

    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == 'CSS1Compat') {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;

    }

     //绑定windows事件

    window.onscroll = function () {

        if (getScrollTop() == getScrollHeight() - getWindowHeight()) {

          //发送请求

           postSomething();

        }
    }

 

2.AJAX提交数据

function postSomething() {
        var xhr = new XMLHttpRequest();
        if (xhr) {
            // xhr.open([string]method,[string]url,[boolen optional]async,[string optional]user, [sting optional]password)
            xhr.open('POST', '/article', true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.onreadystatechange = function () {
                if ((xhr.readyState == 4) && (xhr.status == 200)) {
                    //return xhr.responseText、xhr.responseType、xhr.responseXML
                    var responseData = JSON.parse(xhr.responseText);
                    page = parseInt(JSON.stringify(responseData.page));
                    console.log(parseInt(JSON.stringify(responseData.page)));
                    for (i = 0; i < responseData.article.length; i++) {
//                        console.log(responseData.article[i].title)
                        addContent(responseData.article[i].id, responseData.article[i].title, responseData.article[i].createTime, responseData.article[i].username, responseData.article[i].content);
                    }
                }
                return true;
            }
        }
        else {
            return false;
        }
        xhr.send("page=" + page);
        return true;
    }

3.NodeJS后台

router.route('/')
    .get(function (req, res, next) {

        var perPage = 5;

        var page = 0;

      

        article.find({})
            .limit(perPage)
            .skip(perPage * page)
            .exec(function (err, results) {
                article.count().exec(function (err, count) {
                    if (err)return console.error(err);
                    for (i = 0; i < results.length; i++) {
                        results[i].content = (JSON.stringify(results[i].content)).substr(0, 200);
                    }
                    res.render('article', {
                        article: results,
                        count: count,
                        page: page
                    });
                })
            })

    })
    .post(function (req, res, next) {
        var perPage = 5;
        var page = Math.max(0, req.body.page);   
        article.find({})
            .limit(perPage)
            .skip(perPage * page)
            .exec(function (err, results) {
                article.count().exec(function (err, count) {

                    if (err)return console.error(err);

                    //重新组装content.只选取前200个字符

                    for (i = 0; i < results.length; i++) {
                        results[i].content = (JSON.stringify(results[i].content)).substr(0, 200);
                    }
                    res.jsonp({
                        article: results,
                        count: count,
                        page: page + 1
                    });
                })
            })

    });