快取+懶載入實現瀑布流效果
阿新 • • 發佈：2019-02-20
頁面程式碼：
效果圖如下：<!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").onload=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>
