先看下效果
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>