缓存+懒加载实现瀑布流效果

最新推荐文章于 2024-05-19 13:47:41 发布

霜月枫桥

最新推荐文章于 2024-05-19 13:47:41 发布

阅读量1.6k

点赞数

分类专栏： Web前台demo小记

本文链接：https://blog.csdn.net/MOONCOM/article/details/78774659

版权

Web前台demo小记专栏收录该内容

22 篇文章 3 订阅

订阅专栏

页面代码：

<!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>

效果图如下：

霜月枫桥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
缓存+懒加载实现瀑布流效果

页面代码：最佳影片TOP200推送 body{ margin:0px; background-color: #368; } div#content { position:relative; margin: 20px auto; } figure.movie { box-shadow: 1px 1px 1em #ddd;
复制链接

扫一扫