if（tempNodes[i].className=="box"）{
childArray.push（tempNodes[i]）;
}
}
returnchildArray;//返回所有的子节点
}
效果图:
针对不同屏幕大小显示的个数是不一样的
4.JS实现静态瀑布流
先实现静态的布局,也就是浏览器下拉不会自动刷新出新的图片.
实现排列算法很简单
1.把第一排图片的高度全部存到一个数组
2.计算出第一排中的图片的最小高度和对应位置
3.把第一排之后的第一个图片放到该位置上
4.重新设置该位置的高度为两个图片相加
5.循环2剩余全部图片
代码:
/*
用于加载其他函数
*/
window.onload=function（）{
setImgLocation（"container"）;
}
/*
设置图片个数及位置排列
*/
functionsetImgLocation（parent）{
varcparent=document.getElementById（parent）;//得到父节点
varchildArray=getChildNodes（cparent）;//得到图片数量
varimgWidth=childArray[0].offsetWidth;//获取照片宽度
varscreenWidth=document.documentElement.clientWidth;//获取浏览器宽度
varcount=Math.floor（screenWidth/imgWidth）;//每行的个数
cparent.style.cssText="width:
"+count*imgWidth+"px;margin:
0auto;";//设置其宽度并居中
//定义数组,存放第一行照片高度
varimgHArray=[];
//循环遍历图片
for（vari=0;i//如果图片在第一行则获取高度
if（iimgHArray[i]=childArray[i].offsetHeight;
}else//否则把最小高度的填充剩余图片
{
varminHeight=Math.min.apply（null,imgHArray）;//获取最小高度
varminIndex=getMinIndex（minHeight,imgHArray）;//获取最小高度对应的下标
childArray[i].style.position="absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置
childArray[i].style.top=minHeight+"px";//设置要填充图片距顶高度
childArray[i].style.left=childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度
imgHArray[minIndex]+=childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加
//开始下一轮循环
}
}
}
/*
获取最小高度对应的下标
*/
functiongetMinIndex（minHeight,imgHArray）{
for（variinimgHArray）{
if（imgHArray[i]==minHeight）{
returni;
}
}
}
/*
获取全部图片的个数
*/
functiongetChildNodes（parent）{
varchildArray=[];//定义一个数组存放图片box
vartempNodes=parent.getElementsByTagName（"*"）;//获取父节点下的所有节点
//循环添加class为box的节点
for（vari=0;iif（tempNodes[i].className=="box"）{
childArray.push（tempNodes[i]）;
}
}
returnchildArray;//返回所有的子节点
}
效果:
5.js实现动态加载
动态加载也就是滚动条永远滑不到底部,要解决动态加载我们需要考虑两个问题:
1.什么时候加载?
滑动距离+浏览器高度>最后一张图片距离顶部的距离
2.怎样加载?
通过创建新的节点,把创建的节点添加进去即可
最终代码:
/*
用于加载其他函数
*/
window.onload=function（）{
varcparent=document.getElementById（"container"）;//得到父节点
setImgLocation（cparent）;
//设置加载的图片
vardata=["image/01.jpg","image/02.jpg","image/03.jpg","image/04.jpg","image/05.jpg","image/06.jpg","image/07.jpg","image/08.jpg","image/09.jpg",
"image/11.jpg","image/12.jpg","image/13.jpg","image/14.jpg","image/15.jpg","image/16.jpg","image/17.jpg"];
//滑动监听
window.onscroll=function（）{
if（checkLoad（cparent））{
for（vari=0;i//创建新的节点
vardiv1=document.createElement（"div"）;
div1.className="box";
vardiv2=document.createElement（"div"）;
div2.className="box_border";
varimg=document.createElement（"img"）;
img.className=".box_borderimg";
img.src=data[i];
div2.appendChild（img）;
div1.appendChild（div2）;
cparent.appendChild（div1）;
}
setImgLocation（cparent）;//创建节点后重新排列
}
}
}
/*
检查是否应该加载
*/
functioncheckLoad（cparent）{
varchildArray=getChildNodes（cparent）;//得到图片个数
varlastImgHight=childArray[childArray.length-1].offsetTop;//得到最后一张图片距离顶部高度
varscrollHeight=document.documentElement.scrollTop||document.body.scrollTop;//获得滑动距离（浏览器兼容性真烦人）
varbrowserHeight=document.documentElement.clientHeight;//获得浏览器高度
if（lastImgHightreturntrue;
}else{
returnfalse;
}
}
/*
设置图片个数及位置排列
*/
functionsetImgLocation（cparent）{
varchildArray=getChildNodes（cparent）;//得到图片数量
varimgWidth=childArray[0].offsetWidth;//获取照片宽度
varbrowserWidth=document.documentElement.clientWidth;//获取浏览器宽度
varcount=Math.floor（browserWidth/imgWidth）;//每行的个数
cparent.style.cssText="width:
"+count*imgWidth+"px;margin:
0auto;";//设置其宽度并居中
//定义数组,存放第一行照片高度
varimgHArray=[];
//循环遍历图片
for（vari=0;i//如果图片在第一行则获取高度
if（iimgHArray[i]=childArray[i].offsetHeight;
}else//否则把最小高度的填充剩余图片
{
varminHeight=Math.min.apply（null,imgHArray）;//获取最小高度
varminIndex=getMinIndex（minHeight,imgHArray）;//获取最小高度对应的下标
childArray[i].style.position="absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置
childArray[i].style.top=minHeight+"px";//设置要填充图片距顶高度
childArray[i].style.left=childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度
imgHArray[minIndex]+=childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加
//开始下一轮循环
}
}
}
/*
获取最小高度对应的下标
*/
functiongetMinIndex（minHeight,imgHArray）{
for（variinimgHArray）{
if（imgHArray[i]==minHeight）{
returni;
}
}
}
/*
获取全部图片的个数
*/
functiongetChildNodes（parent）{
varchildArray=[];//定义一个数组存放图片box
vartempNodes=parent.getElementsByTagName（"*"）;//获取父节点下的所有节点
//循环添加class为box的节点
for（vari=0;iif（tempNodes[i].className=="box"）{
childArray.push（tempNodes[i]）;
}
}
returnchildArray;//返回所有的子节点
}
效果:
以上就是本文章的内容，希望对大家有所帮助
展开阅读全文
相关搜索
升级会员 