第七周第四天笔记之花瓣网实例
2018-09-05 本文已影响0人
果木山
花瓣网实例
<!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>
