前端开发技能瀑布流_请求今日头条数据

上海web前端开发招聘要求|前端开发搭建本地服务器热更新|web前端开发实训总结范文

示例请求头条数据(滚动鼠标试试48)

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发 引用插件:获取头条数据–吃鸡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        #Project {
            position: relative;
            width: 1000px;
            margin: 0 auto;
            top: 50px;
        }
    </style>
</head>
<body>
    <h1 style=”width:100%;text-align:center;background:#ED4040;color:#fff;position:fixed;top:0;left:0;z-index:9;box-shadow: 0 2px 5px #ccc;”>今日头条(吃鸡)</h1>
    <ul id=”Project”></ul>
    <script src=”https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js”></script>
    <script>
        // 瀑布流处理,为了方便跨域用jquey的ajax,jsonp
        (function () {
            function waterfall() {
                var _this = this;
                _this.parm = arguments[0];
                var MainBox = document.getElementById(_this.parm.container);
                var rowNum = _this.parm.rowNum || 1;
                var itw = MainBox.offsetWidth / rowNum;
                // 获取头条数据,console.log(Tdata)中查看
                $.ajax({
                    url: _this.parm.url,
                    type: ‘GET’,
                    async: false,
                    dataType: ‘jsonp’,
                    beforeSend: function () {
                        loadding();
                    },
                    success: function (Tdata) {
                        addlist(Tdata.data);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus + ‘:’ + XMLHttpRequest.status);
                    },
                    complete: function () {
                        setTimeout(domLocation, 1000);
                    }
                })
                //创建dmo结构
                function addlist(data) {
                    var clis = document.createDocumentFragment();
                    for (var i in data) {
                        var cli = document.createElement(‘li’);
                        cli.style.cssText += ‘width:’ + itw + ‘px;position:absolute;overfllow:hidden;visibility:hidden’;
                        var cimg = (data[i][‘middle_image’] != undefined) ? ‘<img src=”‘ + data[i][‘middle_image’] +
                            ‘” style=”display:block;margin:0 auto 5px auto;width:100%;”>’ : ”;
                        cli.innerHTML = ‘<a href=”https://www.toutiao.com/’ + data[i][‘source_url’] +
                            ‘” target=”_blank”><div style=”margin:5px;padding:5px;border-radius:4px;color:#666;border:1px solid #ccc;”>’ +
                            cimg + ‘<h5>’ + data[i][‘title’] + ‘</h5></div></a>’;
                        clis.appendChild(cli);
                    }
                    MainBox.appendChild(clis);
                }
                //位置处理
                function domLocation() {
                    for (var i = _this.parm.listNum; i < MainBox.children.length; i++) {
                        var leftV = ”,
                            topV = ”;
                        if (i < rowNum) {
                            leftV = i % rowNum * itw,
                                topV = 0,
                                _this.parm.listArr[i] = topV + MainBox.children[i].clientHeight;
                        } else {
                            topV = Math.min.apply(null, _this.parm.listArr);
                            var minImdex = _this.parm.listArr.indexOf(topV);
                            leftV = MainBox.children[minImdex].offsetLeft; //最小值位置
                            _this.parm.listArr[minImdex] = topV + MainBox.children[i].clientHeight; //更新高度
                        }
                        MainBox.children[i].style.cssText += ‘left:’ + leftV + ‘px;top:’ + topV + ‘px;visibility:visible;’;
                    }
                    _this.parm.listNum = MainBox.children.length; //记录上一页最后节点
                    _this.parm.pageNum += 1;
                    _this.parm.callback();
                    document.body.removeChild(document.getElementById(‘loadmsg’)); //移除load
                }
                //加载提示
                function loadding() {
                    var loadmsg = document.createElement(‘div’);
                    loadmsg.id = ‘loadmsg’;
                    loadmsg.innerHTML = ‘加载中’;
                    loadmsg.style.cssText +=
                        ‘position:fixed;bottom:0;background:#fff;color:#666;text-align:center;width:100%;line-height:40px;’
                    document.body.appendChild(loadmsg);
                }
            } //waterfall-end
            window.waterfall = waterfall;
        })()
        ///////////////////////////////////////////分割线//////////////////////////////////////////////////////////
        //api可能失效,请前往头条自己粘一个过来
        //https://www.toutiao.com/api/pc/feed/?category=news_tech&utm_source=toutiao&widen=1&max_behot_time=0&max_behot_time_tmp=0&tadrequire=false&as=A1C55A115ADECCD&cp=5A1ACE0CFC1DDE1&_signature=brAvZgAANK2cUGcIvMrRGm6wL3
        // 调用
        function makdom() {
            new waterfall({
                container: ‘Project’,
                url: ‘https://www.toutiao.com/search_content/?offset=40&format=json&keyword=绝地求生&autoload=true&count=20&cur_tab=0’,
                rowNum: 5,
                listNum: listNum,
                pageNum: pageNum,
                listArr: listArr,
                callback: function () {
                    listNum = this.listNum;
                    pageNum = this.pageNum;
                    listArr = this.listArr;
                    isc = 0; //可以滚
                    console.log(‘读到第’ + pageNum + ‘页’);
                    //console.log(listArr);
                }
            })
        }
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////
        var listNum = 0, //当前数量
            pageNum = 0, //当前页数
            listArr = []; //记录值高度
        makdom();
        // 滚到加载
        var startX, startY, moveEndX, moveEndY, X, Y;
        var op = {
            touchFn: function (e) {
                var e = e || window.event;
                // e.stopPropagation();
                switch (e.type) {
                    case “touchstart”:
                        startX = e.changedTouches[0].pageX, startY = e.changedTouches[0].pageY;
                        break;
                    case “touchend”:
                        if (Math.abs(Y) > Math.abs(X) && Y < 0 && isc == 0) {
                            isc++;
                            makdom();
                        }
                        break;
                    case “touchmove”:
                        moveEndX = e.changedTouches[0].pageX, moveEndY = e.changedTouches[0].pageY;
                        X = moveEndX – startX, Y = moveEndY – startY;
                        break;
                }
            },
            scrollFn: function (e) {
                var e = e || window.event;
                var ew = e.wheelDelta || e.detail;
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if (ew < 0 && isc == 0 && document.documentElement.scrollHeight >= document.documentElement.clientHeight +
                    scrollTop) {
                    isc++;
                    makdom();
                }
            }
        }
        // 操作
        window.onmousewhell = window.onmousewheel = op.scrollFn;
        window.addEventListener(‘DOMMouseScroll’, op.scrollFn, false); //pc
        for (var i in ev = [‘touchstart’, ‘touchmove’, ‘touchend’]) {
            document.addEventListener(ev[i], op.touchFn, false);
        } //mobile
    </script>
</body>
</html>

##模拟
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端和后端怎么合作开发:pub</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #Project {
            position: relative;
            width: 1000px;
            margin: 0 auto;
            background: red;
        }
    </style>
</head>
<body>
    <div id=”Project”></div>
    <script>
        var MyData = [];
        var pageNum = 1;
        makdom();
        function makdom() {
            new waterfall({
                container: ‘Project’,
                data: givedata(),
                rowNum: 4,
            })
        }
        //模拟数据
        function givedata() {
            // 每次显示30条数据
            for (var i = 0; i < 30; i++) {
                var h = parseInt(Math.random() * 100 + 100);
                var c = ‘#’ + (Math.random() * 0xffffff << 0).toString(16);
                var it = {
                    height: h,
                    color: c
                };
                MyData.push(it);
            }
            return MyData
        }
        // 滚动加载
        var isc = 0;
        var scrollFn = function (event) {
            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            if (document.documentElement.scrollHeight == document.documentElement.clientHeight + scrollTop && isc == 0) {
                var loadmsg = document.createElement(‘div’)
                loadmsg.innerHTML = ‘加载中’;
                loadmsg.style.cssText +=
                    ‘position:fixed;bottom:0;background:#fff;color:#666;text-align:center;width:100%;line-height:40px;’
                document.body.appendChild(loadmsg);
                isc++;
                setTimeout(function () {
                    document.body.removeChild(loadmsg);
                    isc = 0
                    makdom()
                }, 1000)
                return false;
            }
        };
        window.onmousewhell = window.onmousewheel = scrollFn;
        window.addEventListener(‘DOMMouseScroll’, scrollFn, false);
        window.addEventListener(‘touchmove’, scrollFn, false);
        // 数据处理
        function waterfall() {
            console.log(‘读到’ + Number(pageNum++) + ‘页’);
            var MainBox = document.getElementById(arguments[0].container);
            var MyData = arguments[0].data; //要显示的数据
            var rowNum = arguments[0].rowNum;
            var colNum = 0;
            var itw = MainBox.offsetWidth / rowNum;
            var itboxs = document.createDocumentFragment();
            var topVs = []; //存着top值
            for (var i in MyData) {
                var itbox = document.createElement(‘div’);
                var kNum = i % rowNum;
                //算坐标
                var leftV = kNum * itw; //x轴
                var topV = 0; //y轴
                if (kNum == 0) colNum++;
                topV = (i < rowNum) ? 0 : MyData[i – rowNum][‘height’] + topVs[i – rowNum];
                topVs.push(topV);
                itbox.style.cssText += ‘width:’ + itw + ‘px;height:’ + MyData[i][‘height’] +
                    ‘px;background:;position:absolute;left:’ + leftV + ‘px;top:’ + topV + ‘px;overfllow:hidden;’;
                // 放内容部分
                itboxC = document.createElement(‘div’);
                itboxC.style.cssText += ‘margin:5px;width:’ + Number(itw – 10) + ‘px;height:’ + Number(MyData[i][‘height’] – 10) +
                    ‘px;background:’ + MyData[i][‘color’] + ‘;border-radius:4px;color:#fff;border:1px solid #ccc;’;
                itboxC.innerHTML = ‘<h1 style=”text-align:center;line-height:’ + Number(MyData[i][‘height’] – 10) + ‘px;”>’ + i +
                    ‘</h1>’
                itbox.appendChild(itboxC)
                itboxs.appendChild(itbox)
            }
            MainBox.appendChild(itboxs)
        }
    </script>
</body>
</html>

前端 移动端开发 pc模拟安卓浏览器|沈阳智联招聘前端开发|前端开发技术和工具

» 本文来自:前端开发者 » 《前端开发技能瀑布流_请求今日头条数据》
» 本文链接地址:https://www.rokub.com/4193.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!