css布局-瀑布流的实现
一、基本思路
1、先看最终的效果图:
2、实现原理:通过position:absolute(绝对定位)来定位每一个元素的位置,并且将当前列的高度记录下来方便下一个dom位置的计算
二、代码实现
1、版本一:根据思路实现基础版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css布局-瀑布流的实现</title>
<style type="text/css">
.box {
position: relative;
width: 500px;
min-height: 100px;
margin: 100px auto;
background: #eeeeee;
}
.item {
position: absolute;
width: 120px;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="item" style="height: 40px;background: red;"></div>
<div class="item" style="height: 50px;background: blue;"></div>
<div class="item" style="height: 100px;background: green;"></div>
<div class="item" style="height: 60px;background: gray;"></div>
<div class="item" style="height: 50px;background: orange;"></div>
<div class="item" style="height: 20px;background: yellow;"></div>
<div class="item" style="height: 40px;background: red;"></div>
<div class="item" style="height: 50px;background: blue;"></div>
<div class="item" style="height: 100px;background: green;"></div>
<div class="item" style="height: 120px;background: gray;"></div>
<div class="item" style="height: 58px;background: orange;"></div>
<div class="item" style="height: 36px;background: yellow;"></div>
</div>
<script type="text/javascript">
const BOX_WIDTH = document.querySelector('.box').offsetWidth //瀑布流外层盒子的宽度
const ITEM_WIDTH = document.querySelector('.item').offsetWidth //瀑布流内层盒子的宽度
const COLUMN = Math.floor(BOX_WIDTH/ITEM_WIDTH) //根据宽度计算可渲染的列数
const MARGIN = (BOX_WIDTH - ITEM_WIDTH*COLUMN)/(COLUMN-1) // 根据宽度计算每一列的间距
const MARGINTOP = 10 //固定设置每一个小盒子上下间距是10
let height_arr = new Array(COLUMN).fill(0) //定义一个长度等同与列数的数组用来存储每一列的高度,初始值均为0
let item = document.querySelectorAll('.item')
//遍历每一个小盒子,确定小盒子的位置
for(let i = 0; i < item.length; i++) {
let index = height_arr.indexOf(Math.min.apply(null, height_arr))
item[i].style.left = (ITEM_WIDTH + MARGIN) * index + 'px'
item[i].style.top = height_arr[index] + MARGINTOP + 'px'
height_arr[index] += item[i].offsetHeight + MARGINTOP
}
//将数组中最大的值,即最高的那一列的高度赋给外层盒子
document.querySelector('.box').style.height = Math.max.apply(null, height_arr) + 'px'
</script>
</body>
</html>
2、版本二:对版本一进行封装,方便重复使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css布局-瀑布流的实现</title>
<style type="text/css">
.box {
position: relative;
width: 500px;
min-height: 100px;
margin: 100px auto;
background: #eeeeee;
}
.item {
position: absolute;
width: 120px;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" style="">
<div class="item" style="height: 40px;background: red;"></div>
<div class="item" style="height: 50px;background: blue;"></div>
<div class="item" style="height: 100px;background: green;"></div>
<div class="item" style="height: 60px;background: gray;"></div>
<div class="item" style="height: 50px;background: orange;"></div>
<div class="item" style="height: 20px;background: yellow;"></div>
<div class="item" style="height: 40px;background: red;"></div>
<div class="item" style="height: 50px;background: blue;"></div>
<div class="item" style="height: 100px;background: green;"></div>
<div class="item" style="height: 120px;background: gray;"></div>
<div class="item" style="height: 58px;background: orange;"></div>
<div class="item" style="height: 36px;background: yellow;"></div>
</div>
<script type="text/javascript">
function WaterFall(params) {
this.box = (params && params.parent) || '.box'
this.item = (params && params.child) || '.item'
this.column = (params && params.column) || 0
this.row_margin = (params && params.row_margin) || 0
this.column_margin = (params && params.column_margin) || 10
this.height_arr = []
this._box_width = 0
this._item_width = 0
this._computed = function() {
this._box_width = document.querySelector(this.box).offsetWidth
this._item_width = document.querySelector(this.item).offsetWidth
this.column = Math.floor((this._box_width - this.row_margin)/this._item_width) //列数
this.row_margin = !this.row_margin ? (this._box_width - this._item_width * this.column)/(this.column-1) : this.row_margin
}
this.init = function() {
this._computed()
let item = document.querySelectorAll(this.item)
this.height_arr = new Array(this.column).fill(0)
for(let i = 0; i < item.length; i++) {
let index = this.height_arr.indexOf(Math.min.apply(null, this.height_arr))
item[i].style.left = (this._item_width + this.row_margin) * index + 'px'
item[i].style.top = this.height_arr[index] + this.column_margin + 'px'
this.height_arr[index] += item[i].offsetHeight + this.column_margin
}
document.querySelector('.box').style.height = Math.max.apply(null, this.height_arr) + 'px'
}
}
var test = new WaterFall()
test.init()
</script>
</body>
</html>
三、总结:瀑布流的实现并不复杂,只要清楚了原理剩下的就是耐心的计算间距以及小盒子的位置啦~
css布局-瀑布流的实现的更多相关文章
- 简单CSS定位瀑布流实现方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js-实现多列布局(瀑布流)
本文是使用面向对象的思想实现多列布局(瀑布流).当然,使用面向过程也能实现,具体效果图和案例如下: 具体实现代码如下: <!DOCTYPE html> <html lang=&quo ...
- 详解纯css实现瀑布流(multi-column多列及flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- 纯css实现瀑布流(multi-column多列及flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形…)
前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较’高级’的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...
- Objectiv-c - UICollectionViewLayout自定义布局-瀑布流
最近刚写的一个简单的瀑布流. 整体思路可能不是很完善. 不过也算是实现效果了. 高手勿喷 思路: 自定义UICollectionViewLayout实际上就是需要返回每个item的fram就可以了. ...
- 分别用js和css实现瀑布流
下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到 column-count分列 column-width固 ...
- 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形...)
前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较'高级'的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...
随机推荐
- HTTPS 加密机制
目录 1. HTTPS 概述 2. 对称加密 3. 非对称加密 4. 非对称加密改良方案 5. 非对称加密 + 对称加密 6. 中间人攻击 7. 数字证书 8. 数字签名 9. HTTPS 工作原理 ...
- Collection Lists
ArrayList LinkedList Vector 顺序添加 抽象数据类型(ADT)是一个实现包括储存数据元素的存储结构以及实现基本操作的算法. ArrayList (1)ArrayList是 ...
- 【POJ】1679 The Unique MST
题目链接:http://poj.org/problem?id=1679 题意:给你一组数据,让你判断是否是唯一的最小生成树. 题解:这里用的是kuangbin大佬的次小生成树的模板.直接判断一下次小生 ...
- 教你如何有效防止DDos攻击?
DDos又称分布式拒绝服务,DDos是利用大量合理的请求造成资源过载,导致服务不可用.就比如一个餐馆总共有100个座位,突然有一天某个商家恶意竞争,雇佣了200个人来到这个餐馆坐着不吃不喝,门口还排着 ...
- vue中beforeRouteEnter 执行的时机及运用的误区?
beforeRouteEnter钩子 beforeRouteEnter (to, from, next) { console.log(this); //undefined,不能用this来获取vue实 ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- kernel32 的 GetVersionExA/W
今天接到一个问题,说Kernel32 模块的 GetVersionEx 获取系统版本不准确, 然后让我查查什么原因, 我当时就想,它不准,就用ntdll的 RtlGetVersion 阿,或者 Rtl ...
- 【HDOJ】P1215 七夕节
题目意思很简单,不解释 有两种方法, 1是暴力法,不就是 2就是下面要讲的方法 假如果说一个数n可以被b整除,那么一定可以被b的因子整除 那么我需要做的就是枚举这些因子 多余的请看代码 #includ ...
- Flask理论基础(一)加载配置文件
一.修改/新增配置项 1.使用配置文件 app.config.from_pyfile("config.cfg") 如上 config.cfg 可以是任意后缀的文本文件,需要与app ...
- pandas读书笔记、重新索引
重新索引 pandas对象的一个重要方法是 reindex ,其作用是创建一个适应新索引的新对象. #reindex函数的参数 reindex(index,method,fill_value, ...