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

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瀑布流布局实现代码

- Author -

画一生情入颜容

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

Javascript 相关文章推荐
使用正则替换变量
May 05 Javascript
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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
Foreign Key(1) 云服务器(1) expdp(1) 内存池(1) 外键约束(1) JDK(1) Vite(1) queue(1) 腾讯云(1) 数据备份(2)
You might like
德生PL990的分析评价
2021/03/02 无线电
PHP 日常开发小技巧
2009/09/23 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
redis+php实现微博（二）发布与关注功能详解
2019/09/23 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
深入理解js中this的用法
2016/05/28 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
对python中的logger模块全面讲解
2018/04/28 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python实现控制电脑鼠标和键盘，登录QQ的方法示例
2019/07/06 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
美国复古街头服饰精品店：Need Supply Co.
2017/02/22 全球购物
JENNIFER BEHR官网：各种耳环和发饰
2020/06/07 全球购物
无房证明范本
2014/09/17 职场文书
交通事故和解协议书
2014/09/25 职场文书
公司周年庆典标语
2014/10/07 职场文书
python执行js代码的方法
2021/05/13 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers