找回密码
当前位置：前端开发者 > JavaScript > 正文

JS瀑布流下拉加载数据效果

2018-09-20 20:34:40 分类：JavaScript 阅读(101) 评论(0)

前端开发工作流工具 菜鸟前端开发的的工作 前端开发工作好找吗

由于没有数据就没有用到ajax，用setTimeout()函数代替了一下，原理差不多的。
html 代码

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>瀑布流形式one</title>
    <style type=”text/css”>
        html,
        body {
            background: #ccc;
            padding: 0px;
            margin: 0px;
        }
        .box {
            width: 960px;
            margin: 0 auto;
            overflow: auto;
        }
        .childDom {
            background: #fff;
            transition: all .5s ease;
        }
        .childDom:hover {
            transform: scale(1.1);
        }
        .loadInfo {
            text-align: center;
            font-size: 2em;
        }
    </style>
    <script type=”text/javascript”>
        var Funs = function (newObj) {
            var Obj = {
                width: 240,
                height: 400,
                rowsNum: 4,
                dataNum: 22,
                boxDom: “box”,
                num: 10,
                class: “childDom”
            };
            var topNum = 0, leftNum = 0;
            Funs.prototype.setEle = function () {
                var boxDom = document.getElementById(Obj.boxDom);
                var boxWidth = Obj.width * Obj.rowsNum + Obj.num * (Obj.rowsNum – 1);
                if (Obj.dataNum / Obj.rowsNum !== parseInt(Obj.dataNum / Obj.rowsNum)) {
                    var boxHeight = Obj.height * (parseInt((Obj.dataNum / Obj.rowsNum)) + 1) + Obj.num * (Obj.dataNum / Obj.rowsNum);
                } else {
                    var boxHeight = Obj.height * (Obj.dataNum / Obj.rowsNum) + Obj.num * ((Obj.dataNum / Obj.rowsNum) – 1);
                }
                boxDom.style.width = boxWidth + “px”;
                boxDom.style.height = boxHeight + “px”;
                return boxDom;
            }
            Funs.prototype.creChildEle = function (n) {
                var creEle = document.createElement(“div”);
                creEle.className = Obj.class;
                creEle.innerHTML = n;
                creEle.style.float = “left”;
                creEle.style.position = “absolute”;
                creEle.style.width = Obj.width + “px”;
                creEle.style.height = Obj.height + “px”;
                creEle.style.marginLeft = leftNum + “px”;
                creEle.style.marginTop = topNum + “px”;
                return creEle;
            }
            Funs.prototype.compute = function (n) {
                if ((n + 1) / Obj.rowsNum == parseInt((n + 1) / Obj.rowsNum)) {
                    leftNum = 0;
                    topNum += Obj.height + Obj.num;
                } else {
                    leftNum += Obj.width + Obj.num;
                    topNum = topNum;
                }
            }
            Funs.prototype.init = function () {
                if (newObj !== null) {
                    Obj = newObj;
                }
                var dom = this.setEle();
                for (var i = 0; i < Obj.dataNum; i++) {
                    var creEle = this.creChildEle(i);
                    this.compute(i);
                    dom.appendChild(creEle);
                }
            }
        }
        //获取滚动高度、文档高度、浏览器视口高度
        var heightFuns = function () {
            //获取滚动高度
            heightFuns.prototype.getScrollTop = function () {
                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;
            }
            //获取文档的总高度
            heightFuns.prototype.getScrollHeight = function () {
                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;
            }
            //获取浏览器视口的高度
            heightFuns.prototype.getWindowHeight = function () {
                var windowHeight = 0;
                if (document.compatMode == ‘CSS1Compat’) {
                    windowHeight = document.documentElement.clientHeight;
                } else {
                    windowHeight = document.body.clientHeight;
                }
                return windowHeight;
            }
        }
    </script>
</head>
</p>
<p>
    <body>
        <h1 style=”text-align: center;”>模拟瀑布流下拉加载数据效果</h1>
        <div class=”box” id=”box”>
        </div>
        <div class=”loadInfo” id=”loadInfo”>
            <script type=”text/javascript”>
                var data = {
                    width: 250,
                    height: 300,
                    rowsNum: 3,
                    dataNum: 0,
                    boxDom: “box”,
                    num: 20,
                    class: “childDom”
                };
                function showData() {
                    data.dataNum += 10;
                    var creObj = new Funs(data);
                    creObj.init();
                }
                showData();
                var heightObj = new heightFuns();
                window.onscroll = function () {
                    var loadDom = document.getElementById(“loadInfo”);
                    if (heightObj.getScrollTop() == heightObj.getScrollHeight() – heightObj.getWindowHeight()) {
                        setTimeout(showData, 1000);
                        loadDom.innerHTML = “正在加载…”;
                    }
                }
            </script>
    </body>
</html>

前端开发找不到工作怎么办 web前端开发工作累吗 前端开发的工作要求

» 本文来自：前端开发者 » 《JS瀑布流下拉加载数据效果》
» 本文链接地址：https://www.rokub.com/5838.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论