学习总结之图片的循环加载

发表于   |   分类于

前言

　　之前对如何用javascript实现图片瀑布流的效果进行了总结。那么这一篇我们来讲解如何实现图片的循环加载。即滚动条拖动到底部时，能够无限的加载想要的图片。

CODE

　　在写CODE之前还是先进行一下构想。为了实现这种循环的加载我们需要完成什么样的事情。
　　首先当滚动条滚动到贴底的一张图片出现时，我们载入新的图片。同时将新的图片也按照瀑布流的形式进行摆放。OK，那么为了完成这些事件，我们需要获得最底部的图片距离顶部的高度。而获得了这个高度后又该如何检测到滚动到了此处呢？接下来看一看code吧~

检测滚动

function checkFlag(){
var cparent=document.getElementById("container");
var ccontent=getChildElement(cparent,"box");//运用我们上一张讲到的函数获得类名为box的DIV
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//得到最底部的图片的距顶高度
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//获得隐藏部分的滚动顶高，这个距离我们等会详细讲一下
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//得到可视区域的高度
if(lastContentHeight<scrollTop+pageHeight){//当最底部图片的距顶高度小于滚动顶高加可视区高时，我们返回true的布尔类型
return true;
}
}

　　这里讲解一下scollTop和if后面的括号里判断的含义：
首先解释scrollTop:
网上的解释是，“设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离”。这可能乍看之下有点难以理解，那么我们通俗的解释一下。
首选如果页面得高度超过了网页的可视区域即clientHeight的话，多余的部分会被隐藏。我们需要通过滚动条来看到被隐藏的部分。当向下拖动滚动条时，被隐藏的部分一点一点的被展现出来，而展现出来的隐藏部分的高度就是我们scrollTop。这个值是随着滚动条的拖动而变动的。
括号里判断的意思是：
若判断符号取等号的话，即是当拖动滚动条渐渐向下刚好到了最底部图片的顶部，此时我们可视区域的高度加上scrollTop刚好等于最底部图片的距顶高度。继续拖动时，可视区高度加scrollTop就会大于这个值，即滚动到了可以看见最后一张图的地步了~所以当这个距顶高度小于可视区高加csrollTop时，我们返回true，表示：啊！已经到了要加载图片的时候了！

载入图片

var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};//定义一个数组来存放需要加载的图片
window.onscroll=function(){   //当拖动滚动条时我们执行下列函数
    if(checkFlag()){     //首先我们来判断是否滚动到了要加载图片的位置，当然返回true时我们进行接下来的操作
        var cparent=document.getElementById("container");//取出container
        for(var i=0;i<imgData.data.length;i++){ //建立循环添加（数量=加载图片数）的数组
            var ccontent=document.createElement("div");//由于这些图片是后添加的，所以需要通过javascrip来添加子元素，而这些元素一共有3个，即box,box_img,img~
            ccontent.className="box";
            cparent.appendChild(ccontent);//添加box
            var boximg=document.createElement("div");
            boximg.className="box_img";
            ccontent.appendChild(boximg);//添加box_img
            var img=document.createElement("img");
            img.src=imgData.data[i].src;//图片来源指定所声明的存放图片的数组
            boximg.appendChild(img);//添加图片
        }
        imgLocation("container","box");//将图片同样按照瀑布流的方式进行布局
    }
}

　　好了这样我们的循环加载就实现了！拖动滚动条时，可以不停的加载图片了~

结语

　　那么循环加载的内容就讲到这里了~瀑布流的实例涵盖了许多之前JS学习中的知识点，但是实际的项目中，遇到的问题肯定不止这么简单啦~需要学习的东西还有很多很多！！