第七周第四天笔记之花瓣网实例

作者: 果木山 | 来源:发表于2018-09-05 09:49 被阅读0次

第七周第四天笔记之花瓣网实例
2018-08-18
项目总结
Machine Learning笔记第08周
第七周第四天笔记之DOM库
第七周到第十三周复习笔记
Guava学习
花瓣网分析
#红书房#《国语集解》笔记34：一次认全主要青铜器
爬虫之异步加载（实战花瓣网）

花瓣网实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花瓣网实例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 1250px;
            margin: 10px auto;
            overflow: hidden;
        }
        div ul{
            width: 230px;
            margin: 10px;
            float: left;
        }
        div ul li{
            background-color: darkgrey;
            margin-bottom: 10px;
        }
        div ul li img{
            width: 100%;
        }
        a{
            position: fixed;
            right: 20px;
            bottom: 25px;
            width: 80px;
            height: 80px;
            font-size: 20px;
            line-height: 80px;
            border-radius: 50%;
            text-align: center;
            background-color: orangered;
            text-decoration: none;
            display: none;
        }
    </style>
</head>
<body>
<div id="wrap">
    <ul>
        <!--<li><img src="" alt=""></li>-->
    </ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>
<a href="javascript:void(0);">toTop</a>
<script src="js库/utils.js"></script>
<script>
    var oWrap=document.getElementById("wrap");
    var aUl=utils.getChildren(oWrap);
    var aImg=oWrap.getElementsByTagName("img");
    var aBtn=document.getElementsByTagName("a")[0];
    var data=null;
    var scrollBom=null;
    var timer=null;
    var bOk=false;
    //1 获取数据
    getData();
    function getData() {
        var xml=new XMLHttpRequest();
        xml.open("GET","text1/data111.txt");
        xml.send(null);
        xml.onreadystatechange=function(){
            if(xml.readyState==4 && /^2\d{2}/.test(xml.status)){
                data=utils.jsonParse(xml.responseText);
                Li50();
            }
        }
    }
    //2 创建li元素
    function createLi() {
        var oLi=document.createElement("li");
        oLi.innerHTML='<img src="" realImg="'+data[utils.rnd(0,9)].imgSrc+'" alt="">';
        utils.setCss(oLi,"height",utils.rnd(80,200));
        return oLi;
    }
    //3 创建50个
    function Li50() {
        for(var i=0; i<50; i++){
            var ary=utils.makeArray(aUl);
            ary.sort(function (a,b) {
                return a.offsetHeight-b.offsetHeight;
            });
            ary[0].appendChild(createLi());
        }
        showImage();
    }
    function showImage() {
        for(var i=0; i<aImg.length; i++){
            scrollBom=utils.win("scrollTop")+utils.win("clientHeight");
            var imgTop=utils.offset(aImg[i]).Top;
            if(imgTop<scrollBom){
                lazyLoad(aImg[i]);
            }
        }
    }
    function lazyLoad(img) {
        if(img.loaded) return;
        var frgImg=new Image();
        frgImg.src=img.getAttribute("realImg");
        frgImg.onload=function () {
            img.src=this.src;
            utils.setCss(img.parentNode,"height",img.offsetHeight);
            img.loaded=true;
            frgImg=null;
        };
        frgImg.onerror=function () {
            img.style.backgroundColor="red";
            img.loaded=true;
            frgImg=null;
        }
    }
    //滚轮事件
    window.onscroll=onscroll0;
    function onscroll0() {
        if(scrollBom+300 > document.body.scrollHeight){
            Li50();
        }
        showImage();
        aa();
    }
    //函数中不填加aa()函数，此时就不会触发按钮显现
    function onscroll1() {
        if(bOk){
            clearInterval(timer);
            aa();//在停止定时器后，判断此时是否要显示按钮；
        }
        bOk=true;
        if(scrollBom+300 > document.body.scrollHeight){
            Li50();
        }
        showImage();
    }
    //当卷去的距离大于一屏时，按钮显现，当小于一屏时按钮消失
    function aa(){
        if(utils.win("scrollTop") > utils.win("clientHeight")){
            aBtn.style.display="block";
        }else{
            aBtn.style.display="none";
        }
    }
    //回到顶部事件
    aBtn.onclick=function () {
        this.style.display="none";
        window.onscroll=onscroll1;//重点1
        var v=5;
        var f=30;
        var step=f*v;
        var scrollTop=utils.win("scrollTop");
        timer=setInterval(function () {
            scrollTop-=step;
            if(scrollTop<=0){
                utils.win("scrollTop",0);
                clearInterval(timer);
                window.onscroll=onscroll0;//重点2
                return;
            }
            //设置
            utils.win("scrollTop",scrollTop);
            bOk=false;
        },f)
    }
</script>
</body>
</html>