今天早起看了慕课的瀑布流，的确讲的十分详细，也十分的好，我在博客里也就只能给代码加些注释，和说一下思路。建议大家去看一下慕课的瀑布流教程，非常详细，每一个细节都讲的非常好，只要懂JS的基础代码，看起来应该不是多大问题，里面没有太难得方法，但自己写不出来还是因为思路上有问题，下面就详细说一下几个重点方法的代码，建议大家去慕课详细学习
HTML 和CSS没有太难得地方
<div id="main">//一个main包含了整个页面内容，box用来做一个外容器，img作为图片容器
<div class="box">
<div class="pic">
<img src="/UploadFiles/2021-04-02/0.jpg">
//CSS
//这里面的填充用padding值，因为offsetHeight是包括一个padding而不包括margin的方便以后高度的测量
*{
margin: 0px;
padding: 0px;
}
#main{
position: relative;//在main上设置相对定位，在JS给box设置绝对定位，来控制图片位置
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius:5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 168px;//瀑布流统一宽度但不同一高度，高度为自适应就好
height: auto;
}
JS代码
在我们写JS代码之前，我们需要搞明白我们需要什么方法，是否需要封装起来调用，我们第一步要干什么，
那么我们第一步要干什么呢？我们做瀑布流首先要做的是获取到所有小部件也就是box，我们无论做什么处理都是对box的处理或者img的处理，所以要获取到所有的box，所以我们可以把它封装起来
//根据class获取元素
function getByClass(parent,clsName){//传入父元素和想要的class
var boxArr=new Array//用来存储获取到所有class为box的元素，可以用对象的方式也可以用[]创建
oElements=parent.getElementsByTagName('*');//取出所有子元素
for (var i = 0; i < oElements.length; i++) {//我们需要遍历所有的子元素
if(oElements[i].className==clsName)//如果我们找到了相应的子元素
boxArr.push(oElements[i]);//取出传过来相等的className
//push是数组自带的方法
};
return boxArr;返回数组
}
这样我们就得到了我们想要的class，之后该怎么办呢，先从一个box下手，我们需要取得第一排到底有多少个元素，因为之前我们并没有确定我们main的宽度，所以是自适应的也就是说我们把页面缩小，我们每一排的元素也会相应的减少，为了能让瀑布流的代码有更好的应用性，让不同尺寸的图片都可以应用，所以，我们需要手动计算一排究竟可以放多少张图片呢，那如何计算呢？
我们可以算出页面总宽在box的宽，就OK了
var oBoxW=oBoxs[0].offsetWidth;//box的宽，提到了里面计算了padding的值
var clos=Math.floor(document.documentElement.clientWidth/oBoxW)//求列数
这样我们就求出了列数，无论图片的宽度如何变，我们都可以算出来
floor是用来取整数的，因为我们的px是没有浮点数类型的避免计算错误，所以取整
oparent.style.cssText='width:'+oBoxW*clos+'px; margin :0 auto';
设置main的宽度
我们已经取得了列数之后呢我们第一排的图片肯定是一排宽度相等，长度不一是吧，也就是说，我们第二排的图片需要接上第一排图片的后边，我们不能一排一排操作，但我们可以一个一个操作，怎么操作呢，我们可以取到第一排高度最小的将下一张图片，也就是如果第一排7个，那下一个就是第八个，把第八个图片放在最小高度的图片上，如何实现呢，我们先试想一下，我们首先需要求出第一排中最小，我们有一个Math.min求最小，但是呢我们这个函数无法传入用数组，只能是具体的数怎么半呢，apply来扩展作用域
用代码展示下
var hArr=[];//每一列高度的值
for (var i = 0; i < oBoxs.length; i++) {
if(i<clos){//先记录好第一排高度
hArr.push(oBoxs[i].offsetHeight);//放进去
}else{//如果到达第二排，就开始计算
var minH=Math.min.apply(Math,hArr);最小值计算
//为什么可以呢，本来不能传数组，我们通过apply绑定作用域在Math上，也就是说还是执行这个函数但是，apply第二个参数需要是数组，所以间接地把参数变成了数组传进去，也就是说我们还是用了Math函数但值变成了数组里的值。
//console.log(minH)
var index=getMinhIndex(hArr,minH)//获取索引
oBoxs[i].style.position="absolute";我们就可以找到，传入数组和最小值
oBoxs[i].style.top=minH+"px";那下一张图片的高度救球出来了
oBoxs[i].style.left=oBoxW*index+"px";左边的距离就是索引乘以元素的宽
hArr[index]+=oBoxs[i].offsetHeight;//我们添加了一个图片后需要刷新数组里的高度，再去寻找下一个最小的，再向他的下面添加图片，一次循环
}
};
function getMinhIndex (arr,val){
for(var i in arr){//在其中找到最小值，返回索引
if(arr[i]==val){
return i;
}
}
}
以上就大体做出了一个瀑布流的样式，就差拖动滚动条加载了，这里面肯定需要后台的支持，在慕课上，老师做了一个伪处理，这里建议看慕课视频，有图解十分清楚，我用语言或图片不太好表达
var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}//我们自己写一个json数据
window.onscroll=function(){
if(checkScrollSlide){
var oparent=document.getElementById("main")
//将数据快渲染到当前页面尾部
for (var i = 0; i < dataInt.data.length; i++) {//添加
var oBox=document.createElement("div");
oBox.className="box";
oparent.appendChild(oBox);
var opic=document.createElement('div');
opic.className='pic';
oBox.appendChild(opic);
var oimg=document.createElement('img');
oimg.src='img/'+dataInt.data[i].src;//将数据加进去
opic.appendChild(oimg)
}
waterfall('main','box');//一会看完整代码，这就是刚才那些的封装
}
}
function checkScrollSlide(){//检测是否具备加载数据块的条件
var oparent=document.getElementById('main');
var oBoxs=getByClass(oparent,'box')
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2)求出最后一个图片的一半距离页面顶端的距离
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.body.clientHeight||document.documentElement.clientHeight;
return(lastBoxH<scrollTop+height)"htmlcode">
window.onload=function(){
waterfall('main','box');
//json
var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}
window.onscroll=function(){
if(checkScrollSlide){
var oparent=document.getElementById("main")
//将数据快渲染到当前页面尾部
for (var i = 0; i < dataInt.data.length; i++) {
var oBox=document.createElement("div");
oBox.className="box";
oparent.appendChild(oBox);
var opic=document.createElement('div');
opic.className='pic';
oBox.appendChild(opic);
var oimg=document.createElement('img');
oimg.src='img/'+dataInt.data[i].src;
opic.appendChild(oimg)
}
waterfall('main','box');
}
}
}
function waterfall(parent,box){
//将main下所有class为box的元素取出来
var oparent=document.getElementById(parent);
var oBoxs=getByClass(oparent,box)
//console.log(oBox.length)
//计算整个页面的列数（页面宽/box宽）
var oBoxW=oBoxs[0].offsetWidth;
//console.log(oBoxW);
var clos=Math.floor(document.documentElement.clientWidth/oBoxW)//求列数
//console.log(clos)
//设置main的宽
oparent.style.cssText='width:'+oBoxW*clos+'px; margin :0 auto';
var hArr=[];//每一列高度的值
for (var i = 0; i < oBoxs.length; i++) {
if(i<clos){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(Math,hArr);
//console.log(minH)
var index=getMinhIndex(hArr,minH)//索引
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH+"px";
oBoxs[i].style.left=oBoxW*index+"px";
hArr[index]+=oBoxs[i].offsetHeight;//更改数组
}
};
//console.log(hArr)
}
//根据class获取元素
function getByClass(parent,clsName){
var boxArr=new Array//用来存储获取到所有class为box的元素
oElements=parent.getElementsByTagName('*');//取出所有子元素
for (var i = 0; i < oElements.length; i++) {
if(oElements[i].className==clsName)
boxArr.push(oElements[i]);//取出传过来相等的className
};
return boxArr;
}
function getMinhIndex (arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
function checkScrollSlide(){//检测是否具备加载数据块的条件
var oparent=document.getElementById('main');
var oBoxs=getByClass(oparent,'box')
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2)
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.body.clientHeight||document.documentElement.clientHeight;
return(lastBoxH<scrollTop+height)"text-align: center">
以上所述是小编给大家介绍的JS原生瀑布流效果实现详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
幽灵资源网 Design By www.bzswh.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。