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

来源：互联网发布：文明6 简体中文 mac版编辑：程序博客网时间：2024/05/01 05:44

先看下效果

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