首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

瀑布流的实现方式（原生js+jquery+css3）

Posted in Javascript onJune 28, 2020

前言

项目需求要弄个瀑布流的页面，用的是waterfall这个插件，感觉还是可以的，项目赶就没自己的动手写。最近闲来没事，就自己写个。大致思路理清楚，还是挺好实现的... 

原生javascript版

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>瀑布流-javascript</title>
 <style>
 *{margin:0;padding:0;}
 #content{position: relative;margin:0 auto;}
 .box{padding:10px;float: left;}/*首行浮动，第二行开始绝对定位*/
 .box img{width: 180px;height:auto;display: block;}
 </style>
 <script>
 window.onload=function(){
 waterfall('content','box');
 
 //改变窗口大小时，重新排列
 window.onresize = function(){
 waterfall('content','box');
 }
 
 //如果数据不够，没出现滚动条，自动加载数据
 var time=setInterval(function(){
 if(checkscrollside()){
  addDate();//插入数据
  waterfall('content','box');//加载完数据从新排列
 }else{
  clearInterval(time);
  window.onscroll=function(){
  if(checkscrollside()){
  addDate();
  waterfall('content','box');
  };
  }
 }
 },1000) 
 
 } 
 // 数据插入
 function addDate(){
 var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模拟数据，也可以是对象
 var oParent = document.getElementById('content');
 for(var i=0;i<dataInt.length;i++){//循环插入数据 
 var oBox=document.createElement('div');
 oBox.className='box';
 oParent.appendChild(oBox);
 var oImg=document.createElement('img');
 oImg.src='./img/'+dataInt[i];
 oBox.appendChild(oImg);
 }
 }
 //主函数
 function waterfall(parentID,childClass){
 var oParent=document.getElementById(parentID);
 var arrBox=getClassObj(parentID,childClass);// getClassObj()获取子class的数组
 var iBoxW=arrBox[0].offsetWidth;// 获取瀑布流块的宽度
 var num=Math.floor(document.documentElement.clientWidth/iBoxW);//计算窗口能容纳几列
 oParent.style.width=iBoxW*num+'px';//设置父级宽度
 var arrBoxH=[];//数组，用于存储每列中的所有块框相加的高度
 for(var i=0;i<arrBox.length;i++){//遍历数组瀑布流 块
 var boxH=arrBox[i].offsetHeight;//获取当前块的高度
 if(i<num){
  arrBox[i].style.cssText="";//防止用户改变窗口大小，到时样式出错
  arrBoxH[i]=boxH; //第一行中的num个块box 先添加进数组arrBoxH
 }else{
  var minH=Math.min.apply(null,arrBoxH);//获取数组arrBoxH中的最小值minH
  var minHIndex=getminHIndex(arrBoxH,minH);//遍历数组获取最小值minH的索引
  arrBox[i].style.position='absolute';//设置绝对位移
  arrBox[i].style.top=minH+'px';
  arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接获取arrBox[minHIndex].offsetLeft
  arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加后，更新最小列高
 }
 }
 }
 //获取子class的数组
 function getClassObj(parentID,childClass){
 var oParent=document.getElementById(parentID);
 var allChildObj=oParent.getElementsByTagName('*');//获取父级下的所有子集
 var childObj=[];//创建一个数组 用于收集子元素
 for (var i=0;i<allChildObj.length;i++) {//遍历子元素、判断类别、压入数组
 if (allChildObj[i].className==childClass){
  childObj.push(allChildObj[i]);
 }
 };
 return childObj;
 }
 //获取数组最小值的索引
 function getminHIndex(arr,minH){
 for(var i in arr){
 if(arr[i]==minH){
  return i;
 }
 }
 }
 // 判断滚动条是否到底部
 function checkscrollside(){
 var arrBox=getClassObj("content",'box');
 //获取最后一个瀑布流块的高度：距离网页顶部(实现未滚到底就开始加载)
 var lastBoxH=arrBox[arrBox.length-1].offsetTop;
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//获取滚动条卷走的高度
 var documentH=document.documentElement.clientHeight;//显示页面文档的高
 return (lastBoxH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
 }
 </script>
</head>
<body>
 <div id="content">
 <div class="box"><img src="img/0.jpg" alt=""></div>
 <div class="box"><img src="img/1.jpg" alt=""></div>
 <div class="box"><img src="img/2.jpg" alt=""></div>
 <div class="box"><img src="img/3.jpg" alt=""></div>
 <div class="box"><img src="img/4.jpg" alt=""></div>
 <div class="box"><img src="img/5.jpg" alt=""></div>
 <div class="box"><img src="img/6.jpg" alt=""></div>
 <div class="box"><img src="img/7.jpg" alt=""></div>
 <div class="box"><img src="img/8.jpg" alt=""></div>
 <div class="box"><img src="img/9.jpg" alt=""></div>
 <div class="box"><img src="img/10.jpg" alt=""></div>
 </div>
</body>
</html>

jquery版本 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>瀑布流-jquery</title>
 <style>
 *{margin:0;padding:0;}
 #content{position: relative;margin:0 auto;}
 .box{padding:10px;float: left;}
 .box img{width: 180px;height:auto;display: block;}
 </style>
 <script src="js/jquery-1.11.1.min.js"></script>
 <script>
 $(function(){
 waterfall();
 
 //改变窗口大小时，重新排列
 $(window).resize(function(){
 waterfall();
 })
 
 //如果数据不够，没出现滚动条，自动加载数据
 var time=setInterval(function(){
 if(checkscrollside()){
  addDate();//插入数据
  waterfall();//加载完数据从新排列
 }else{
  clearInterval(time);
  $(window).scroll(function(){
  if(checkscrollside()){
  addDate();
  waterfall();
  };
  })
 }
 },1000) 
 
 }) 
 // 数据插入
 function addDate(){
 var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模拟数据，也可以是对象
 var oParent = $('#content');
 for(var i=0;i<dataInt.length;i++){//循环插入数据
 oParent.append('<div class="box"><img src="./img/'+dataInt[i]+'" alt=""></div>'); 
 }
 }
 //主函数
 function waterfall(){
 var arrBox=$('#content').children('.box');// box对象
 var iBoxW=arrBox.eq(0).innerWidth();// 获取瀑布流块的宽度,注意width(),跟innerWidth()的区别
 var num=Math.floor($(window).width()/iBoxW);//计算窗口能容纳几列
 $('#content').css('width',iBoxW*num);//设置父级宽度
 var arrBoxH=[];//数组，用于存储每列中的所有块框相加的高度
 for(var i=0;i<arrBox.length;i++){//遍历数组瀑布流 块
 var boxH=arrBox.eq(i).innerHeight();//获取当前块的高度
 if(i<num){
  arrBox.eq(i).attr('style','');//防止用户改变窗口大小，到时样式出错
  arrBoxH[i]=boxH; //第一行中的num个块box 先添加进数组arrBoxH
 }else{
  var minH=Math.min.apply(null,arrBoxH);//获取数组arrBoxH中的最小值minH
  var minHIndex=$.inArray(minH,arrBoxH);//使用jquery提供的工具
  arrBox.eq(i).css({'position':'absolute','top':minH,'left':minHIndex*iBoxW});//设置定位
  arrBoxH[minHIndex]+=arrBox.eq(i).innerHeight();//添加后，更新最小列高
 }
 }
 }
 // 判断滚动条是否到底部
 function checkscrollside(){
 var arrBox=$('#content').children('.box');
 //获取最后一个瀑布流块的高度：距离网页顶部(实现未滚到底就开始加载)
 var lastBoxH=arrBox.eq(arrBox.length-1).offset().top;
 var scrollTop=$(window).scrollTop()//获取滚动条卷走的高度
 var documentH=$(window).height();;//显示页面文档的高
 return (lastBoxH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
 }
 </script>
</head>
<body>
 <div id="content">
 <div class="box"><img src="img/0.jpg" alt=""></div>
 <div class="box"><img src="img/1.jpg" alt=""></div>
 <div class="box"><img src="img/2.jpg" alt=""></div>
 <div class="box"><img src="img/3.jpg" alt=""></div>
 <div class="box"><img src="img/4.jpg" alt=""></div>
 <div class="box"><img src="img/5.jpg" alt=""></div>
 <div class="box"><img src="img/6.jpg" alt=""></div>
 <div class="box"><img src="img/7.jpg" alt=""></div>
 <div class="box"><img src="img/8.jpg" alt=""></div>
 <div class="box"><img src="img/9.jpg" alt=""></div>
 <div class="box"><img src="img/10.jpg" alt=""></div>
 </div>
</body>
</html>

大致思路

 1.先让第一行的浮动
 2.计算第一行的每个块的高度
 3.遍历第一行之后的每一个块，逐个放在最小高度的下面
 4.加载数据插入最后，再重新计算 

注意点

a.原生js

1.定义了getClassObj()函数用于获取class类的对象，方便调用。考虑了兼容性 getElementsByClassName  
2.定义了getminHIndex()函数用户获取最小值的索引 
3.设置块与块之间的距离最好用padding，这样的话offsetHeight可以直接获取得到高度。如果设置margin则得多加个外边距的距离 
4.代码中设置了定时器加载数据，其实可以省略，只要保证第一次加载的数据能满屏就可以。如果没出现滚动条的话onscroll事件是不会执行到的。也就没办法加载数据了 
5.代码中的计算宽度也可以修改，设计的页面是定宽的瀑布流的话。这里主要是做了响应式的处理 

var arrBox=getClassObj(parentID,childClass);// getClassObj()获取子class的数组
var iBoxW=arrBox[0].offsetWidth;// 获取瀑布流块的宽度
var num=Math.floor(document.documentElement.clientWidth/iBoxW);//计算窗口能容纳几列
oParent.style.width=iBoxW*num+'px';//设置父级宽度

6.每设置一块位移，都要在列高的数组上增加数值，防止块重叠

arrBox[i].style.position='absolute';//设置绝对位移
arrBox[i].style.top=minH+'px';
arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接获取arrBox[minHIndex].offsetLeft
arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加后，更新最小列高

b.jquery

1.思路是跟js一样的，只是jquery封装了很多方法，让我们简便的就实现了
2.注意width(),跟innerWidth()的区别。前者只能获取宽度值（不包括补白padding） 

css3版本

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>瀑布流-css3</title>
 <style>
 *{margin:0;padding:0;}
 #content{margin:0 auto;position: relative;width:1200px;column-count:6;-moz-column-count:6;-webkit-column-count:6;}
 .box{padding:10px;width: 180px;}
 .box img{width: 180px;height:auto;display: block;}
 </style>
 <script>
 window.onload=function(){
 //如果数据不够，没出现滚动条，自动加载数据
 var time=setInterval(function(){
 if(checkscrollside()){
  addDate();//插入数据
 }else{
  clearInterval(time);
  window.onscroll=function(){
  if(checkscrollside()){
  addDate();
  };
  }
 }
 },1000) 
 
 } 
 // 数据插入
 function addDate(){
 var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模拟数据，也可以是对象
 var oParent = document.getElementById('content');
 for(var i=0;i<dataInt.length;i++){//循环插入数据 
 var oBox=document.createElement('div');
 oBox.className='box';
 oParent.appendChild(oBox);
 var oImg=document.createElement('img');
 oImg.src='./img/'+dataInt[i];
 oBox.appendChild(oImg);
 }
 }
 //获取子class的数组
 function getClassObj(parentID,childClass){
 var oParent=document.getElementById(parentID);
 var allChildObj=oParent.getElementsByTagName('*');//获取父级下的所有子集
 var childObj=[];//创建一个数组 用于收集子元素
 for (var i=0;i<allChildObj.length;i++) {//遍历子元素、判断类别、压入数组
 if (allChildObj[i].className==childClass){
  childObj.push(allChildObj[i]);
 }
 };
 return childObj;
 }
 // 判断滚动条是否到底部
 function checkscrollside(){
 var arrBox=getClassObj("content",'box');
 //获取最后一个瀑布流块的高度：距离网页顶部(实现未滚到底就开始加载)
 var lastBoxH=arrBox[arrBox.length-1].offsetTop;
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//获取滚动条卷走的高度
 var documentH=document.documentElement.clientHeight;//显示页面文档的高
 return (lastBoxH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
 }
 </script>
</head>
<body>
 <div id="content">
 <div class="box"><img src="img/0.jpg" alt=""></div>
 <div class="box"><img src="img/1.jpg" alt=""></div>
 <div class="box"><img src="img/2.jpg" alt=""></div>
 <div class="box"><img src="img/3.jpg" alt=""></div>
 <div class="box"><img src="img/4.jpg" alt=""></div>
 <div class="box"><img src="img/5.jpg" alt=""></div>
 <div class="box"><img src="img/6.jpg" alt=""></div>
 <div class="box"><img src="img/7.jpg" alt=""></div>
 <div class="box"><img src="img/8.jpg" alt=""></div>
 <div class="box"><img src="img/9.jpg" alt=""></div>
 <div class="box"><img src="img/10.jpg" alt=""></div>
 </div>
</body>
</html>

注意点

1.滚动加载还是得另外加js 
2.加载的数据，是竖向排列的。体验不是很友好 
3.有兼容性问题，Internet Explorer 10 +

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

瀑布流的实现方式（原生js+jquery+css3）

- Author -

羯瑞。♑

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
详解AngularJs路由之Ui-router-resolve（预加载）
Jun 13 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 #Javascript
Javascript类型系统之undefined和null浅析
Jul 13 #Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 #Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 #Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 #Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 #Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 #Javascript
GUI(2) Apache(17) 数据重复(1) sortInts(1) WebSockets(3) Hudi(1) Tkinter(4) feDisplacementMap(1) Navigator(1) Pool(1)
You might like
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
js FLASH幻灯片字符串中有连接符＆的处理方法
2012/03/01 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
js控制input输入字符解析
2013/12/27 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
Python中pass的作用与使用教程
2020/11/13 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
GANT葡萄牙官方商店：拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
世界上最大的乐谱选择：Sheet Music Plus
2020/01/18 全球购物
俄罗斯皮肤健康中心：Pharmacosmetica.ru
2020/02/22 全球购物
护理专业的自荐信
2013/10/22 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书