JS原生瀑布流效果实现


Posted in Javascript onApril 26, 2019

今天早起看了慕课的瀑布流,的确讲的十分详细,也十分的好,我在博客里也就只能给代码加些注释,和说一下思路。建议大家去看一下慕课的瀑布流教程,非常详细,每一个细节都讲的非常好,只要懂JS的基础代码,看起来应该不是多大问题,里面没有太难得方法,但自己写不出来还是因为思路上有问题,下面就详细说一下几个重点方法的代码,建议大家去慕课详细学习
HTML 和CSS没有太难得地方

<div id="main">//一个main包含了整个页面内容,box用来做一个外容器,img作为图片容器
  <div class="box">
   <div class="pic">
    <img src="img/0.jpg">
   </div>
  </div>
  <div class="box">
   <div class="pic">
    <img src="img/0.jpg">
   </div>
  </div>
 <div>
//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)?true:false;//如果页面距离顶部(包括滚轮)的距离比滚轮加页面距离小,那么就返回true
}

完整JS代码

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)?true:false;
}

我的瀑布流图

JS原生瀑布流效果实现

以上所述是小编给大家介绍的JS原生瀑布流效果实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 #Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 #Javascript
vue组件间的参数传递实例详解
Apr 26 #Javascript
详解VUE前端按钮权限控制
Apr 26 #Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 #Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 #Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 #Javascript
You might like
多重?l件?合查?(一)
2006/10/09 PHP
php递归实现无限分类的方法
2015/07/28 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
xtree.js 代码
2007/03/13 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python实现小球弹跳效果
2019/05/10 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python shelve模块实现解析
2019/08/28 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
高二物理教学反思
2014/02/08 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
职务任命书范本
2014/06/05 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
工作失误检讨书
2015/01/26 职场文书
欠款起诉书范文
2015/05/19 职场文书
小学体育组工作总结
2015/08/13 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
html粘性页脚的具体使用
2022/01/18 HTML / CSS