// //第一步目的固定屏幕的宽度,设置摆放图片的个数
// window.onload = function ()//加载函数,目的为了获得屏幕有多少图片
// {
// imgLoaction("container","box");
// }
// function imgLoaction(parent,content)//通过发现父级空间里的子集空间有多少个div来判断图片个数
// {
// //将parent下的所有内容全部取出
// var cparent = document.getElementById(parent);//得到父级空间
// var ccontent =getChildElement(cparent,content);//定义一个对象承载父级空间的所有内容
// // console.log(ccontent);//打印出来看有多少内容
// var imgWidth = ccontent[0].offsetWidth;//得到每个内容的宽度
// var cols = Math.floor(document.documentElement.clientWidth / imgWidth)//整个屏幕的宽度/图片宽度,再令他为整数得到一行的个数
// cparent.style.cssText="width:"+imgWidth*cols+"px;margin: 0 auto"//设置父级空间的内容,令其的整体的宽度为固定的值
// }
// function getChildElement(parent,content) //父级空间内控件比较多需要储存,我定义了10个
// {
// var contentArr=[];//定义一个数组把所有东西存储在一个对象中
// var allcontent =parent.getElementsByTagName("*");//通过父级空间得到子集空间的所有东西
// for(var i=0;i<allcontent.length;i++)//通过for循环把它放在一个数组当中
// {
// if(allcontent[i].className==content)//如果取出的东西与内容也就是box相等
// {
// contentArr.push(allcontent[i]);//将其通过push追加存储在数组中
// }
// }
// return contentArr;
// }
// //第二步目的判断第一排每一个的高度,使第二排的图片插入进高度最低的地方
// window.onload = function ()
// {
// imgLoaction("container","box");
// }
// function imgLoaction(parent,content)
// {
// //将parent下的所有内容全部取出
// var cparent = document.getElementById(parent);
// var ccontent =getChildElement(cparent,content);
// var imgWidth = ccontent[0].offsetWidth;
// var cols = Math.floor(document.documentElement.clientWidth / imgWidth)//整个屏幕的宽度/图片宽度,再令他为整数得到一行的个数
// cparent.style.cssText="width:"+imgWidth*cols+"px;margin: 0 auto";
//
// var BoxHeightArr=[];//定义数组承载盒子中第一排模块的高度
// for(var i = 0;i<ccontent.length;i++)//循环得到每张图片的高度
// {
// if(i<cols)//做出判断目的为了只得到第一排的高度
// {
// BoxHeightArr[i] = ccontent[i].offsetHeight;//每得到一张图片的高度将它存储在数组中
// // console.log(BoxHeightArr[i]);//在控制台打印出所有的高度
// }
// else
// {
// var minheight = Math.min.apply(null,BoxHeightArr);//得到第一排图片高度的最小值,用数组的形式的情况下,为例子所示
// // console.log(minheight);//在控制台打印最小高度
// ccontent[i].style.position = "absolute";//设置图片格式为绝对布局
// ccontent[i].style.top = minheight + "px";//设置图片距上的位置
// var minIndex = getminheight(BoxHeightArr,minheight)//声明参数为存储最小高度的位置
// ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";//设置图片据左的位置为最小图片的位置
// BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;//加载了一个图片后,该位置就其高度现在不是最小高度的位置,它的高度为它们的和
// }
// }
// }
// function getminheight(BoxHeightArr,minHeight) //得到最小高度的位置,参数为数组,和最小高度
// {
// for(var i in BoxHeightArr)//遍历看哪个参数是最小的高度
// {
// if(minHeight==BoxHeightArr[i])
// {
// return i;
// }
// }
// }
// function getChildElement(parent,content)
// {
// var contentArr=[];
// var allcontent = parent.getElementsByTagName("*");
// for(var i=0;i<allcontent.length;i++)
// {
// if(allcontent[i].className==content)
// {
// contentArr.push(allcontent[i]);
// }
// }
// return contentArr;
// }
//第三步目的让图片滚动滚动条可以不停的加载图片,如百度图片下拉不停加载
window.onload = function ()
{ var imgData={"date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
//上面的代码因为要实现可以加载的效果,因为没有服务器传输数据,前端不能获取输出,所以在这里定义JSON字符串来模拟数据
imgLoaction("container","box");
window.onscroll = function () //window.onscroll方法来监听滚动条
{
// checkFlag();//调用函数的执行
if(checkFlag())
{
var cparent = document.getElementById("container");//得到根目录来动态加载
for(var i = 0;i<imgData.date.length;i++)//因为不只加载一次,所以使用for循环,i小于JSON字符串的长度
{
//因为现在需要动态加载,那么就要获得原本静态的标签及其class
var ccontent = document.createElement(("div"));//动态创建元素
ccontent.className = "box";//给它添加className
//因为它里面还要根视图,所有要在父级空间上继续动态创建
cparent.appendChild(ccontent);//加载根视图创建子节点
var boximg = document.createElement("div");//创建该节点的元素
boximg.className = "box_img";
//它里面还有一层还需要加载根视图创建字节点
ccontent.appendChild(boximg);//加载根视图创建字节点
var img =document.createElement("img")//创建该节点的元素
img.src = "img/"+imgData.date[i].src;//加载上src的属性
boximg.appendChild(img);加载根视图
imgLoaction("container","box");//可能会有空白,因为它不会有下面的操作,调用这个方法让他居然下面的操作
}
}
}
}
function checkFlag() //返回布尔类型,true允许加载数据,false不允许加载
{
var cparent = document.getElementById("container");//得到当前内容的id
var ccontent = getChildElement(cparent,"box");//得到当前所有子对象
var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;//得到最后一张图片距顶部的位置
// console.log(lastContentHeight);//打印到控制台,查看最后一张图片距顶部的高度
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop
//上面的代码因为存在浏览器兼容问题,需要用到异或,scrollTop新出现的内容,它的顶部就是当前页面的末尾
console.log(scrollTop);//在控制台查看scrollTop的值
var pageHeight = document.documentElement.clientHeight||document.body.clientHeight//也存在浏览器兼容问题,得到当前页面的高度
// console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);//打印出他们三个的值
if(lastContentHeight<scrollTop+pageHeight)//当最后一张图片距顶部的高度小于新出现的内容+页面的高度
{
return true;
}
}
function imgLoaction(parent,content)
{
//将parent下的所有内容全部取出
var cparent = document.getElementById(parent);
var ccontent =getChildElement(cparent,content);
var imgWidth = ccontent[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth / imgWidth)//整个屏幕的宽度/图片宽度,再令他为整数得到一行的个数
cparent.style.cssText="width:"+imgWidth*cols+"px;margin: 0 auto";
var BoxHeightArr=[];
for(var i = 0;i<ccontent.length;i++)
{
if(i<cols)
{
BoxHeightArr[i] = ccontent[i].offsetHeight;
}
else
{
var minheight = Math.min.apply(null,BoxHeightArr);
// console.log(minheight);//在控制台打印最小高度
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minheight + "px";
var minIndex = getminheight(BoxHeightArr,minheight)
ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
}
}
}
function getminheight(BoxHeightArr,minHeight)
{
for(var i in BoxHeightArr)
{
if(minHeight==BoxHeightArr[i])
{
return i;
}
}
}
function getChildElement(parent,content)
{
var contentArr=[];
var allcontent = parent.getElementsByTagName("*");
for(var i=0;i<allcontent.length;i++)
{
if(allcontent[i].className==content)
{
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
JS实现瀑布流效果
最新推荐文章于 2023-07-11 20:01:53 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)