使用Jquery的getJSON跨域请求蘑菇街图片资源实现瀑布流

最新推荐文章于 2023-07-14 10:43:35 发布

莱恩-哈特

最新推荐文章于 2023-07-14 10:43:35 发布

阅读量882

点赞数 2

分类专栏：前端技术文章标签：蘑菇街瀑布流 jquery jsonp

本文链接：https://blog.csdn.net/wangongda/article/details/73730777

版权

前端技术专栏收录该内容

89 篇文章 0 订阅

订阅专栏

先看下效果

ps:这是一个可以自适应屏幕的瀑布流；

那么来看看怎么去实现

1.找到蘑菇街的xhr请求地址；

2.从这个请求中找到我们需要的图片资源请求路径，从下图可以看出它在请求回的对象的多层属性下；

3.通过下图对比，找到它的控制参数（图中可以看出它是通过page去控制的）

4.结合普通瀑布流和上述资料实现跨域请求的瀑布流，下面上代码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#container {
				background: red;
				margin: 20px auto;
				position: relative;
			}
			
			img {
				width: 300px;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="container">

		</div>
		<script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var n = 0;//定义请求第几页的资源（因为开始就会请求一次，所以初始化为0）
			var zw = 320;
			var ls;		
			var conwidth;
			var pd = true;//控制加载和n递增的开关变量
			//根据屏幕初始化容器宽度和列数
			function setls() {
				ls = Math.floor(($(window).width()) / zw);
				conwidth = ls * zw - 20 + 'px';
				$('#container').css('width', conwidth);
			}
			setls();
			//两个存放位置信息的数组
			var arrleft = [];
			var arrtop = [];
			//初始化数组
			function initarr() {
				for(var i = 0; i < ls; i++) {
					arrleft[i] = i * zw;
					arrtop[i] = 0;
				}
			}
			initarr();
			//取得最小索引
			function getshort(arr) {
				var min = Math.min.apply(null, arr);
				return arr.indexOf(min);
			}
			//jsonp获取数据
			function getdata() {
				var iurl = 'http://list.mogujie.com/search?callback=?&_version=1&ad=2&f=mgjlm&acm=3.mf.1_0_0.0.0.0.mf_15261_485406-idx_0-mfs_26&_mgjuuid=00cdad41-8cdc-4744-a5c4-9ebcf3cd798a&sort=pop&ptp=1._mf1_1239_15261.0.0.ORb9UD&userId=&showH=330&cKey=15&fcid=51249&width=220&action=shoes&page=' + n + '&showW=220&height=330&ratio=2%3A3&cpc_offset=0&offset=&_=1498388815054';
				$.getJSON(iurl, function(data) {
					if(pd == true) {
						for(var i = 0; i < data.result.wall.docs.length; i++) {
							var minindex = getshort(arrtop);
							var imgs = document.createElement('img');
							imgs.src = data.result.wall.docs[i].img;
							imgs.style.left = arrleft[minindex] + 'px';
							imgs.style.top = arrtop[minindex] + 'px';
							$('#container').append(imgs);
							arrtop[minindex] += 470;
						}
						pd = false;
						n++;//严格控制按顺序加载每一页的资源
					}

				})
				pd = true;
			}
			getdata();
			//窗口变化时的处理
			$(window).resize(function() {
				setls();
				arrleft = [];
				arrtop = [];
				initarr();
				var imgs = $('#container img');
				for(var i = 0; i < imgs.length; i++) {
					var minindex = getshort(arrtop);
					imgs[i].style.left = arrleft[minindex] + 'px';
					imgs[i].style.top = arrtop[minindex] + 'px';
					$('#container').append(imgs[i]);
					arrtop[minindex] += 470;
				}
			})
			//滚动时的处理
			$(window).scroll(function() {
				var nowtop = $(window).scrollTop() + $(window).height();
				var bjtop = document.documentElement.scrollHeight || document.body.scrollTop;
				if(nowtop > bjtop * 0.9) {
					getdata();
				}

			})
		</script>
	</body>

</html>

莱恩-哈特

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Jquery的getJSON跨域请求蘑菇街图片资源实现瀑布流

先看下效果ps:这是一个可以自适应屏幕的瀑布流；那么来看看怎么去实现1.找到蘑菇街的xhr请求地址；2.从这个请求中找到我们需要的图片资源请求路径，从下图可以看出它在请求回的对象的多层属性下；3.通过下图对比，找到它的控制参数（图中可以看出它是通过page去控制的）4.结合普通瀑布流和上述资料实现跨域请求的瀑布流，下面上代码：
复制链接

扫一扫

专栏目录