JavaScript瀑布流布局实现代码
更新时间：2017年05月06日 11:22:25 作者：画一生情入颜容
这篇文章主要为大家详细介绍了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>
效果图如下：
其实每一行六个图片不是固定的，当你缩小窗口时，它会成为两列，或者三列四列。但我们为了以后的布局，就将它设置为固定的列数，即根据窗口的大小除以图片的大小，向下取整。
接下来写的是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实现代码。效果图如下：
附上源代码：
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
这篇文章主要介绍了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果,涉及Sketch.js插件的使用及HTML5元素的应用技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-08-08
async表示异步,而await可以看作async wait,个人对async与await的简单理解就是,我们可以用同步的方式去书写异步代码,这篇文章主要给大家介绍了关于JS中如何优雅的使用async await的相关资料,需要的朋友可以参考下2021-10-10
JavaScript中null和undefined的区别详解
null 是一个原始值,表示“无”或“空值”,它通常用于指示变量应有的对象或值不存在,undefined 是一个原始值,表示“未定义”,本文给大家详细介绍了JavaScript中null和undefined的区别,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了JS实现在网页中弹出一个输入框的方法,实例分析了prompt的用法,可用来设置密码,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了微信小程序 开发过程中遇到问题总结的相关资料,需要的朋友可以参考下2017-04-04
ibm官方资料把应用程序从 Internet Explorer 迁移到 Mozilla
使特定于 Internet Explorer 的 Web 应用程序在 Mozilla 上运行时，您遇到过麻烦吗？本文讨论了将应用程序迁移到基于开源 Mozilla 浏览器上时的常见问题。首先讨论跨浏览器开发的基本技术，然后介绍克服 Mozilla 和 Internet Explorer 之间差异的策略。2008-04-04
这篇文章主要介绍了JavaScript移除数组内重复元素的方法,实例分析了javascript遍历数组及删除等操作的相关技巧,需要的朋友可以参考下2015-03-03
使用FormData上传文件时，总是获取不到req.file对象。发现是没有配置对FormData导致的，怎么解决这个问题呢？下面小编给大家带来了JS FormData上传文件的设置方法，需要的朋友参考下吧2017-07-07
这篇文章主要介绍了javascript异步编程的六种方式总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
js通过window.open(url)下载文件并修改文件名
这篇文章主要给大家介绍了关于js如何通过window.open(url)下载文件并修改文件名的相关资料,我们知道下载文件是一个非常常见的需求,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-08-08
最新评论