一、基本思路

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布局-瀑布流的实现的更多相关文章

  1. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js-实现多列布局(瀑布流)

    本文是使用面向对象的思想实现多列布局(瀑布流).当然,使用面向过程也能实现,具体效果图和案例如下: 具体实现代码如下: <!DOCTYPE html> <html lang=&quo ...

  3. 详解纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  4. 纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  5. css3多列布局瀑布流加载样式

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  6. 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形…)

    前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较’高级’的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...

  7. Objectiv-c - UICollectionViewLayout自定义布局-瀑布流

    最近刚写的一个简单的瀑布流. 整体思路可能不是很完善. 不过也算是实现效果了. 高手勿喷 思路: 自定义UICollectionViewLayout实际上就是需要返回每个item的fram就可以了. ...

  8. 分别用js和css实现瀑布流

    下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到    column-count分列 column-width固 ...

  9. 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形...)

    前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较'高级'的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...

随机推荐

  1. [zz]C#多线程环境下调用 HttpWebRequest 并发连接限制

    .net 的 HttpWebRequest 或者 WebClient 在多线程情况下存在并发连接限制,这个限制在桌面操作系统如 windows xp , windows 7 下默认是2,在服务器操作系 ...

  2. 非JAVA客户端与mina使用 PrefixedStringCodecFactory 通讯

    与C++,C#不同,java的写入字节顺序是从高到低(左低到右高) 例如 内存数据:{ 0x67,0x45,0x23,0x01} ,java int值是:0x6745231  而C++是:0x1234 ...

  3. Yslow压力测试

    1.yslow介绍 概述:YSlow是Yahoo发布的一款插件,可安装在Firefox或Chrome上,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化. 2.安装方法 ...

  4. 结合Intel Manual和libdasm学习汇编指令

    参考:http://www.intel.com/content/www/us/en/processors/architectures-software-developer-manuals.html h ...

  5. 1060 Are They Equal (25 分)

    1060 Are They Equal (25 分)   If a machine can save only 3 significant digits, the float numbers 1230 ...

  6. UVA 356 - Square Pegs And Round Holes

    题目:在一个2n*2n的网格中间画一个直径为2n-1的圆,问圆内部的格子以及和圆相交的格子个数. 思路:只要考虑1 / 4圆的点就行,用点到原点距离与半径比较,当格子左下方和右上方都在格子里时,格子在 ...

  7. JDK8新特性之Stream流

    是什么是Stream流 java.util.stream.Stream Stream流和传统的IO流,它们都叫流,却是两个完全不一样的概念和东西. 流可以简单的说是处理数据集合的东西,可以申明式流式A ...

  8. 54-Ubuntu-打包压缩-4-bzip2压缩和解压缩介绍

    bzip2 tar和bizp2命令结合可以实现文件打包和压缩 tar只负责打包,但不压缩 用bzip2压缩tar打包后的文件,其扩展名一般为xxx.tar.bz2 在tar命令有一个选项-j可以调用b ...

  9. 第五篇 scrapy安装及目录结构，启动spider项目

    实际上安装scrapy框架时,需要安装很多依赖包,因此建议用pip安装,这里我就直接使用pycharm的安装功能直接搜索scrapy安装好了. 然后进入虚拟环境创建一个scrapy工程: (third ...

  10. Vue之数据排序加签

    这篇随笔小编给大家带来的是数据排序加签: 所谓数据加签,就是把数据进行加密再传给后端,这样保证数据的秘密性.不容易被修改和获取:排序就是根据公司要求对字段进行排序,有些公司会把字段根据a-z排序,有些 ...