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

前端开发之跨域取值瀑布流

2018-07-19 分类：教程 阅读(699) 评论(0)

前端与移动 开发|前端开发招聘58|上海 前端开发招聘

分析瀑布流疑难问题：
1.其实主要是通过ajax，取值，然后添加到节点
2.判断滚动条滚动到底部，ajax就行了

完美兼容ie6,7，8
预览展示：
代码片段 1

<!DOCTYPE html>
<html lang=”en-US”>
<head>
    <meta charset=”UTF-8″>
    <title>移动端前端开发调试：瀑布流</title>
    <style type=”text/css”>
        body,
        ul,
        li,
        p,
        img {
            margin: 0
        }
        body {
            background: #E0E0E0
        }
        .title {
            text-align: center;
            color: #A73F0E;
        }
        ul {
            padding: 0;
            list-style: none;
            margin: 0 auto;
            width: 1060px;
        }
        li {
            float: left;
            width: 200px;
            margin: 5px;
        }
        li p {
            padding: 5px 2px;
            text-indent: 24px;
            line-height: 20px;
            color: #646060;
        }
        .clearfix:after {
            content: ”;
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        .imgmain {
            border: 1px solid #ddd;
            -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
            box-shadow: 0 0px 8px rgba(0, 0, 0, .1);
            background: #fff;
            margin-bottom: 20px;
        }
        #loading {
            background: url(http://pingfan1990.sinaapp.com/javacript/wall/images/loading.gif) no-repeat center center;
            height: 50px;
            width: 100%;
            position: fixed;
            bottom: 0;
            display: none;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class=”title”>瀑布流</h1>
    <ul id=”watermain” class=”clearfix”>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id=”loading”>
    </div>
    <script type=”text/javascript”>
        (function (window, undefined) {
            var $$ = function (id) {
                return (!id) ? null : document.getElementById(id);
            };
            //jsonpImg构造函数
            function jsonpImg() {
                this.list = $$(‘watermain’).children,
                    this.maxlength = 2,
                    this.Numb = 10,
                    this.loading = $$(‘loading’);
            }
            //jsonpImg原型
            jsonpImg.prototype = {
                addImg: function (obj, url) {
                    var div = document.createElement(‘div’),
                        img = document.createElement(‘img’),
                        p = document.createElement(‘p’),
                        text = document.createTextNode(obj.title);
                    img.src = url + obj.image,
                        div.className = ‘imgmain’;
                    img.alt = obj.alt;
                    p.appendChild(text),
                        div.appendChild(img),
                        div.appendChild(p);
                    return div;
                },
                appendData: function (data) {
                    var list = this.list,
                        maxlength = this.maxlength,
                        addImg = this.addImg,
                        loading = this.loading;
                    //参数用json，则不用new function进行序列化转换
                    var json = data;
                    //var json=new Function(‘return’+data)();
                    loading.style.display = ‘none’;
/*
for(var i=0;i<maxlength*5;){
list[0].appendChild(addImg(json[i],’http://pingfan1990.sinaapp.com/javacript/wall/’)),
list[1].appendChild(addImg(json[i+1],’http://pingfan1990.sinaapp.com/javacript/wall/’)),
list[2].appendChild(addImg(json[i+2],’http://pingfan1990.sinaapp.com/javacript/wall/’)),
list[3].appendChild(addImg(json[i+3],’http://pingfan1990.sinaapp.com/javacript/wall/’)),
list[4].appendChild(addImg(json[i+4],’http://pingfan1990.sinaapp.com/javacript/wall/’)),
i=i+5;
}*/
                    for (var i = 0, len = this.Numb; i < len; i++) {
                        //获取最短的那一列
                        var minIndex = this.getMinList(list);
                        list[minIndex].appendChild(addImg(json[i], ‘http://pingfan1990.sinaapp.com/javacript/wall/’));
                    }
                    if (data == false) loading.innerHTML = ‘没有数据了’;
                },
                getMinList: function (list) {
                    var arr = [], list = $$(‘watermain’).children;
                    for (var i = 0; i < list.length; i++) {
                        arr[i] = list[i].clientHeight;
                    }
                    //升序排列
                    arr.sort(function compare(a, b) {
                        return a – b;
                    });
                    for (var j = 0; j < list.length; j++) {
                        if (list[j].clientHeight == arr[0]) {
                            return j;
                        }
                    }
                },
                datajsonp: function (url, callback) {
                    var script = document.createElement(‘script’);
                    script.type = ‘text/javascript’,
                        script.src = url + callback;
                    //script.src = ‘https://www.rokub.com/mob/server.php?name=pingfan&callback=’+callback;
                    document.getElementsByTagName(‘head’)[0].appendChild(script);
                    // 不能删除添加的script jsonp ，会引起ie7，ie8报错，无法显示数据，因此做兼容
                    if (typeof document.attachEvent == ‘undefined’) {
                        document.getElementsByTagName(‘head’)[0].removeChild(script);
                    }
                }
            }
            window.$$ = $$;
            window.jsonpImg = jsonpImg;
        })(window)
        var load = new jsonpImg();
        //不要用变量去转对象的方法，可能会引起this的问题
        //var appendimg=load.appendData;
        window.onload = function () {
            load.datajsonp(‘http://pingfan1990.sinaapp.com/javacript/wall/jsonpdata.php?name=pingfan&callback=’, ‘load.appendData’);
        }
        //触发事件
        window.onscroll = function () {
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop,
                clientheight = document.documentElement.clientHeight,
                height = document.documentElement.scrollHeight;
            if (scrolltop + clientheight >= height) {
                load.loading.style.display = ‘block’;
                setTimeout(function () {
                    load.datajsonp(‘http://pingfan1990.sinaapp.com/javacript/wall/jsonpdata.php?name=pingfan&callback=’, ‘load.appendData’);
                }, 500)
            }
        }
    </script>
</body>
</html>

资料参考：http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html（跨域讲得很详细）

赞(0)
前端开发者 » 前端开发之跨域取值瀑布流
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论