使用Jquery的getJSON跨域请求蘑菇街图片资源实现瀑布流
2017-06-26 00:00
866 查看
先看下效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/201706/26/016638b47e5788f6a22856585707fdc6)
ps:这是一个可以自适应屏幕的瀑布流;
那么来看看怎么去实现
1.找到蘑菇街的xhr请求地址;
2.从这个请求中找到我们需要的图片资源请求路径,从下图可以看出它在请求回的对象的多层属性下;
![](https://oscdn.geek-share.com/Uploads/Images/Content/201706/26/9035e024d3c7e399963ea5e0d56ab332)
3.通过下图对比,找到它的控制参数(图中可以看出它是通过page去控制的)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201706/26/9ca9de3f37e1a84e034f965e15022bcc)
4.结合普通瀑布流和上述资料实现跨域请求的瀑布流,下面上代码:
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>
相关文章推荐
- 使用Jquery中getJSON和getScript方法实现跨域
- jquery使用$.getJson()跨域大数据量请求方法
- 使用$.getJSON实现跨域ajax请求示例代码
- 使用Jquery中getJSON和getScript方法实现跨域(转载)
- 使用Jquery中getJSON方法实现跨域
- 使用$.getJSON实现跨域ajax请求示例代码
- jquery使用$.getJson()跨域大数据量请求方法
- 使用$.getJSON实现跨域ajax请求
- jquery使用$.getJson()跨域大数据量请求方法
- 使用$.getJSON实现跨域ajax请求
- 前端使用Jquery的getJSON方法,后台使用PHP,解决IE和火狐Firefox中存在的跨域ajax请求问题。
- Jquery getJSON 实现跨域请求 --- callback
- 使用$.getJSON实现跨域ajax请求
- Jquery getJSON 实现跨域请求 --- callback
- 使用$.getJSON实现跨域ajax请求示例代码
- 使用$.getJSON实现跨域ajax请求
- 使用getJSON解决jquery跨域问题
- 用jquery.getJSON实现跨域提交
- 使用jquery的getJSON跨域访问
- 分别使用FlyJSONP和JQuery实现跨域的异步请求