var divs=sEO.$('#box div');
function isComplete(els,fun) {//判断图片是否全部加载完成，完成之后才执行回调函数fun
var flag=true;//设置一个标志，flag=true表示所有图片加载完成
els.forEach(function (div,i) {
var img=div.getElementsByTagName('img')[0];
if (!img.complete)flag=false;//表示存在图片加载未完成
return false;
});
if (flag)fun();
}
function water(oarr) {//瀑布流具体实现
var arr=[];
var timer=setInterval(function () {
isComplete(oarr,function () {
clearInterval(timer);
oarr.forEach(function (div, i) {
if (i<len){
arr.push(div.offsetHeight);//把第一排div的高储存起来
}else {//通过div的left和top决定div的位置
var min_h=Math.min.apply(null,arr);//求上一排总高度的最小值
var index=arr.indexOf(min_h);//求最小高度那一列的下标
div.style.cssText=`position: absolute;left: ${index*img_w}px;top: ${arr[index]}px;`;
arr[index]+=div.offsetHeight;//储存的当前添加图片的那一列的高度改变
}
})
})
},100);
}
water(divs);
var j_len=json.length,j=1;
var show=sEO.$('#show');
window.onscroll=function () {
var div_e=divs[divs.length-1];
var h=div_e.offsetHeight;
var top=div_e.offsetTop;
if (sEO.getScroll(document).top+window.innerHeight>h/2+top){
if (j<j_len){ //当最后半屏图片即将显示完时
load_img(data1); //动态添加数据
divs=sEO.$('#box div');
water(divs);
j++;
}else {//当导航条滑动到最后时提示，页面到底
show.innerText='我是有底线的噢';
show.style.left=(window.innerWidth-show.offsetWidth)/2+'px';
}
}else {
show.innerText='';
}
};
divs=sEO.$('#box div');
window.onresize=function () {//浏览器窗口发生变化，瀑布流排列调整
resize();
water(divs)
};
divs.forEach(function (div,i) {//未每张图片添加自定义属性i
div.i=i;
});
/*到这里动态瀑布流结束，
接下来是点击图片放大及上下切换效果实现*/
var temp1=sEO.$('#temp1').innerHTML;
var show_big=sEO.$('#show_big');
var info=sEO.$('#txt');
var mask=sEO.$('#mask');
var index,txt,show_imgW;
sEO.agent(box,'img','click',function () {//为每张图片添加事件代理
show_big.style.display='block';
src=http://www.likecs.com/this.getAttribute('src');
txt=this.nextElementSibling.innerHTML;
public_b();
mask.style.display='block';
index=this.parentNode.parentNode.i; //当前点击的图片位置
});
sEO.agent(show_big,'a','click',function () {
//为左右图片切换按钮添加事件代理
var cls=this.className;
cls==='prev'?index--:index++;
index=index===-1?(divs.length-1):index;/*图片循环加载*/
index=index===divs.length?0:index;
src=http://www.likecs.com/divs[index].children[0].children[0].getAttribute('src');/*点击之后图片路径*/
txt=divs[index].children[0].children[1].innerHTML;/*点击之后图片描述内容*/
public_b()
});
var show_img,max_h;
function public_b() {
show_big.innerHTML=temp1.replace('http://www.likecs.com/{{src}}',src).replace('{{info}}',txt);
show_img=show_big.children[0];
// var img_h=show_big.children[0].offsetHeight;
max_h=window.innerHeight-140;
// if (img_h>max_h)img_h=max_h;
show_img.style.height=max_h+'px';
show_imgW=show_big.children[0].offsetWidth;
show_big.style.width=show_imgW+'px';
info.style.width=show_imgW-20+'px';
show_big.style.left=(window.innerWidth-show_imgW)/2+'px';
show_img.onclick=mask.onclick=hidden;
}
function hidden() {
show_big.style.display='';
mask.style.display='';
this.onclick=null;
}
```