之前在慕课网上看过一段讲瀑布流的视频,那个时候跟着视频学了一遍,今天自己写了一个,感觉自己代码跟人一样很不成熟。⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
window.οnlοad=function(){
imgLoaction("box");//图片加载
window.οnscrοll=function(){
//下拉刷新
check("box");
}
};
这是图片加载的代码
function imgLoaction(content){
var ccontent=document.querySelectorAll("."+content);
var parent=document.getElementById("container");
var imgWidth=ccontent[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/imgWidth);
parent.style.width=cols*imgWidth+"px";
var imgHeight=[];
for(var i=0;i<cols;i++){
imgHeight.push(ccontent[i].offsetHeight);
ccontent[i].style.left=imgWidth*i+"px";
ccontent[i].style.top=0;
}
for(var i=cols;i<ccontent.length;i++){
getHeightMin(imgHeight,ccontent,i);
}
check("box");
}
//得到高度最低的那张图片
function getHeightMin(imgHeight,content,col){
var imgHeightMin=imgHeight[0],j=0;
for(var i=0;i<imgHeight.length;i++){
if(imgHeightMin>imgHeight[i+1]) {
imgHeightMin = imgHeight[i + 1];
j=i+1;
}
}
var left=content[j].style.left;
content[col].style.left=left;
content[col].style.top=imgHeightMin+"px";
imgHeight[j]=imgHeightMin+content[col].offsetHeight;
}
这是下拉刷新,滚动滚轮无限次刷新
//下拉刷新加载
function check(content){
var content=document.querySelectorAll("."+content);
var imgLast=content[content.length-1];//页面中最后一个元素
var WinHeight=document.documentElement.clientHeight;//浏览器页面可视区的高度
var top=imgLast.offsetTop;//最后一个元素距离页面顶部的距离
var height=imgLast.offsetHeight;//最后一个元素的高度
var scroll=document.body.scrollTop||document.documentElement.scrollTop;//滚动条的滚动距离
var ImgTop=parseInt(top+height);
if (ImgTop-scroll<=WinHeight){
var container=document.getElementById("container");
var imgSrc=["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg","img/14.jpg","img/15.jpg","img/16.jpg","img/17.jpg","img/18.jpg","img/19.jpg"];
for(var i=0;i<imgSrc.length;i++){
var box=document.createElement("div");
box.className="box";
var boxImg=document.createElement("div");
boxImg.className="box_img";
var img=new Image();
img.src=imgSrc[i];
boxImg.appendChild(img);
box.appendChild(boxImg);
container.appendChild(box);
}
console.log(container);
imgLoaction("box");
}
}
外加一张效果图