JavaScript瀑布流布局实现代码


Posted in Javascript onMay 06, 2017

先说一下什么是瀑布流布局。

就是一堆等宽不等高的数据块组成的页面,如图:

JavaScript瀑布流布局实现代码

现在好多网站都采用这种瀑布流布局,如蘑菇街。美丽说等等。
首先要实现它就要明白它是怎样排列的。
每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。。
第一行就是按顺序排列,其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。

首先实现框架。

<div id = "main">
 <div class = "box">
  <div class = "pic">
   <img src = "images/0.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/1.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/2.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/3.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/4.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/5.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/6.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/7.jpg">
  </div>
 </div>

 <div class = "box">
  <div class = "pic">
   <img src = "images/8.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/9.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/10.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/11.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/12.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/13.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/14.jpg">
  </div>
 </div>
</div>

这里定义了14个图片,每个图片都被一个class= box的属性和class= “pic”的属性包裹,在css中定义其样式:

*{
  padding: 0px;
  margin: 0px;
 }

 #main{
  position: relative;

 }
 .box{
/*  display: inline-block;*/
  padding: 15px 0px 0px 15px;
  float: left;

 }
 .pic{
  padding: 10px;
  border-radius: 5px;
  border:1px solid #ccc;
  box-shadow: 0 0 5px #ccc;
 }

 .pic img{
  width: 165px;
  height: auto;
 }
 </style>

效果图如下:

JavaScript瀑布流布局实现代码

其实每一行六个图片不是固定的,当你缩小窗口时,它会成为两列,或者三列四列。但我们为了以后的布局,就将它设置为固定的列数,即根据窗口的大小除以图片的大小,向下取整。

接下来写的是js实现的瀑布流布局。
在写代码之前,由于要用到box属性,而js中没有直接定义获得class的方法,所以我们在这儿要写一个获得class的方法:

function getByClass(parent,className){

 var boxArr = new Array();//用来获取所有class为box的元素

 oElement = parent.getElementsByTagName('*');

 for (var i = 0; i <oElement.length; i++) {

  if(oElement[i].className == className){

   boxArr.push(oElement[i]);

  }
 };
 return boxArr;
}

两个参数分别是父元素和要查找的classname。

接下来写函数:

//首先在onload函数中调用函数

window.onload = function(){
 waterFull('main','box');
}


function waterFull(parent,children){

 //先获得父元素及其底下所有的class = box的元素
 var oParent = document.getElementById(parent);
 var oBoxs = getByClass(oParent,children);

//我们在前面说过,数据块的列数我们是希望不变的。由于每个数据块都是等宽的,所以可以以第一个数据块的宽度为准,获得数据块的宽度。再计算数据块的列数,向下取整。
 var oBoxW = oBoxs[0].offsetWidth;
 var cols = Math.floor(document.documentElement.clientWidth/oBoxW);

接下来设置父元素的样式,我们需要获得它的宽度,并且使其居中
oParent.style.cssText = 'width:' cols * oBoxW + 'px; margin: 0 auto';

//在定义好了所有的样式之后,就是排列数据块。首先第一行是直接排列的。定义一个数组存放每一列的高度,从第二行开始,使得每一个数据块都排在高度最低的那一列。首先得遍历所有的box,即oBoxs

var arrH = []; //定义数组存放每一列的高度
for(var i = 0; i< oBoxs.length; i++){
 //当是第一行时,直接将数据块依次排列,并在数组中记录每一列的高度
 if(i < cols){
  arrH[i] = oBoxs[i].offsetHeight;
 }
 //当i>cols时,即要对前面的所有列的高度进行遍历,将下一个图片放在合适的位置。
 else{
 //首先在数组中找到高度最低的列数。我们都知道有Math.min可以找到最小的数字,但是它接受的参数必须是一组数字,所以在这里我们要用Math.min.apply()方法

 var minH = Math.min.apply(null, arrH); //定义一个变量,存放数组中最小的高度

 //在找出了最小高度之后,我们需要知道它的索引,才能够为接下来的数据块找到合适的位置,所以在下面又定义了一个找出最小值下标的函数。

 //定义一个变量去接受getMinhIndex函数的返回值
 var minIndex = getMinhIndex(arrH,minH);

 //在获得了高度最小的列数的索引后,就可以将下一个元素放到合适的位置
 oBoxs[i].style.position = 'absolute';
 oBoxs[i].style.top = minH + 'px';
 oBoxs[i].style.left = minIndex * oBoxW + 'px';

 //将当前的数据块终于都放到了合适的位置,但不要忘了更新arrH数组
 arrH[minIndex] += oBoxs[i].offsetHeight; 
 }

}

}


//获取当前最小值得下标
function getMinhIndex(array,min){

 for(var i in array){

  if(array[i] == min)

   return i;
 }
}

以上就是完整的瀑布流布局的js实现代码。效果图如下:

JavaScript瀑布流布局实现代码

附上源代码:

js代码:

window.onload = function(){
 waterFull('main','box');
}

function waterFull(parent,children){
 var oParent = document.getElementById(parent);
 //var oBoxs = parent.querySelectorAll(".box");

  var oBoxs = getByClass(oParent,children);

 //计算整个页面显示的列数

 var oBoxW = oBoxs[0].offsetWidth;

 var cols = Math.floor(document.documentElement.clientWidth/oBoxW);

 //设置main的宽度,并且居中

 oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';

 //找出高度最小的图片,将下一个图片放在下面

 //定义一个数组,存放每一列的高度,初始化存的是第一行的所有列的高度

 var arrH = [];

 for(var i = 0; i< oBoxs.length ; i++){
  if(i < cols){
   arrH.push(oBoxs[i].offsetHeight);
  }
  else{
   var minH = Math.min.apply(null,arrH);

   var minIndex = getMinhIndex(arrH,minH);

   oBoxs[i].style.position = 'absolute';
   oBoxs[i].style.top= minH + 'px';
   oBoxs[i].style.left = minIndex * oBoxW + 'px'; 
  // oBoxs[i].style.left = arrH[minIndex].;

   arrH[minIndex] += oBoxs[i].offsetHeight; 
  }
 }


}
function getByClass(parent,className){

 var boxArr = new Array();//用来获取所有class为box的元素

 oElement = parent.getElementsByTagName('*');

 for (var i = 0; i <oElement.length; i++) {

  if(oElement[i].className == className){

   boxArr.push(oElement[i]);

  }
 };
 return boxArr;
}


//获取当前最小值得下标
function getMinhIndex(array,min){

 for(var i in array){

  if(array[i] == min)

   return i;
 }
}

html以及css代码:

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<script src = "./jswaterfll.js"></script>
 <title>瀑布流布局</title>
 <style type="text/css">
 *{
  padding: 0px;
  margin: 0px;
 }

 #main{
  position: relative;

 }
 .box{
/*  display: inline-block;*/
  padding: 15px 0px 0px 15px;
  float: left;

 }
 .pic{
  padding: 10px;
  border-radius: 5px;
  border:1px solid #ccc;
  box-shadow: 0 0 5px #ccc;
 }

 .pic img{
  width: 165px;
  height: auto;
 }
 </style>
</head>
<body>
<div id = "main">
 <div class = "box">
  <div class = "pic">
   <img src = "images/0.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/1.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/2.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/3.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/4.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/5.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/6.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/7.jpg">
  </div>
 </div>

 <div class = "box">
  <div class = "pic">
   <img src = "images/8.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/9.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/10.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/11.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/12.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/13.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/14.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/15.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/16.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/17.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/18.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/19.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/20.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/21.jpg">
  </div>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
Angular 路由route实例代码
Jul 12 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
jquery仿微信聊天界面
May 06 #jQuery
Javascript实现页面滚动时导航智能定位
May 06 #Javascript
JavaScript实现打地鼠小游戏
Apr 23 #Javascript
简单实现jQuery弹幕效果
May 06 #jQuery
javascript编写简易计算器
May 06 #Javascript
You might like
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
React之PureComponent的使用作用
2018/07/10 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python的即时标记项目练习笔记
2014/09/18 Python
在Python中移动目录结构的方法
2016/01/31 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
电脑教师的自我评价
2013/12/18 职场文书
学校安全责任书
2014/04/14 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
关于安全演讲稿
2014/05/09 职场文书
服务口号大全
2014/06/11 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
了解Redis常见应用场景
2021/06/23 Redis