页面代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>最佳影片TOP200推送</title>
<style>
body{
margin:0px;
background-color: #368;
}
div#content {
position:relative;
margin: 20px auto;
}
figure.movie {
box-shadow: 1px 1px 1em #ddd;
width: 200px;
position:absolute;
margin:0px;
background-color: #f7e9ee;
transition:1s;
}
.movie img {
width: 100%;
}
figcaption div {
font-size: 0.9rem;
display: flex;
justify-content: space-between;
height: 21px;
overflow: hidden;
padding: 0px 10px;
}
</style>
</head>
<body>
<div id="content">
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
<script>
var url="http://api.douban.com/v2/movie/top250"; //获取电影信息的接口
var start=0; //从第几部电影开始
var count=20; //一次获取多少部电影
var movieWidth=200; //影片的宽度
var space=10;
var arrY=[]; //保存每行影片的纵坐标
var arrX=[]; //保存每行影片的横坐标
var horizontalCount=0; //页面中每行展示的数量
var hash=[]; //缓存影片信息
var content=null; //影片显示区域
var lastMovie=null;
var toggle=false;
(function(){
var windowHeight=window.innerWidth;
horizontalCount=windowHeight/(movieWidth+space) | 0;
for(var i=0;i<horizontalCount;i++){
arrY[i]=0;
arrX[i]=(movieWidth+space)*i;
}
content=document.getElementById("content");
content.style.width=horizontalCount*(movieWidth+space)-space+"px";
})();
getData({
url:url+"?start="+start+"&count="+count,
recallFun:function(data){
var movie=getMovieData(data);
showMovie(movie);
},
});
function getData(data){
$.ajax({
url:data.url,
dataType:'jsonp',
success:function(e){
data['recallFun'] && data['recallFun'](e.subjects);
},
});
}
function getMovieData(data){
var movie=[];
data.forEach(function(item,index){
movie.push({
url:item.images.large,
year:item.year || "未知",
originName:item.original_title || "未知",
chineseName:item.title || "未知",
score:item.rating.average || "未知",
});
});
return movie;
}
function showMovie(movie){
var i=0;
(function loop(){
var message=movie[i];
var oFigure=document.createElement("figure");
oFigure.className="movie";
oFigure.style.left="0px";
oFigure.style.top="0px";
oFigure.innerHTML=
`
<img src="${message.url}" alt="">
<figcaption>
<div class="messTop">
<i class="year">${message.year}</i>
<span class="originName">${message.originName}</span>
</div>
<div class="messBottom">
<span class="chineseName">${message.chineseName}</span>
<span class="score">${message.score}</span>
</div>
</figcaption>
`;
content.appendChild(oFigure);
/*将新生成的影片移动到合适的位置*/
oFigure.querySelector("img").οnlοad=function(){
var arrIndex=arrY.indexOf(Math.min(... arrY));
oFigure.style.left=arrX[arrIndex]+"px";
oFigure.style.top=arrY[arrIndex]+"px";
arrY[arrIndex]+=oFigure.offsetHeight+2*space;
if(count-1 === i){
lastMovie=oFigure;
toggle=true;
}
i++;
(i<count) && loop();
}
})();
start += 20;
getData({
url:url+"?start="+start+"&count="+count,
recallFun:function(data){
hash=[];
hash=getMovieData(data);
//showMovie(movie);
},
});
}
window.addEventListener("scroll",function(){
if(toggle){
var clientBottom=window.innerHeight + document.documentElement.scrollTop;
var movieBottom=lastMovie.offsetTop + lastMovie.offsetHeight/2;
//console.log(clientBottom);
//console.log(movieBottom);
if(clientBottom>movieBottom){
showMovie(hash);
toggle=false;
}
}
});
</script>
</body>
</html>
效果图如下: