欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

手把手教你JS如何实现瀑布流布局（jquery）

程序员文章站 2022-05-31 18:51:20
...

前言：总所周知，瀑布流是一个很常见的一种布局方式，不受div的大小限制，其中针对不同高度的div做空间的充分利用，首先我们用随机高度，固定宽度生成一批div,你可以看看效果：
手把手教你JS如何实现瀑布流布局（jquery）
正文
不难发现都是杂乱无章的，都会在每行的最低框中放下一个。
Jquery如何实现瀑布流布局，那么我们先看实现出来的右侧效果。
首先实现这个效果我们可以分三步走：

  1. 确定首行各个div位置，left的偏移值，采用相对布局的方式。
  2. 其次应用一个数组存储各个div的高度，找到最低高度，然后将下一个div插入到该下标div下面。
  3. 当第二行的第一个div插入到第一行最低的div下面后，因为该下标的高度就变大了，所以我们要修改这个原先所谓最低的数组下标值，改成原先高度+间隙+自身div的高度，然后继续遍历插入。

只要理解好了这三点，瀑布流真的很简单。
下面我们就来看实际代码操作吧（需要demo的可以关注下留邮箱）

页面html:

<body>
	<div class="allDiv1">

	</div>
</body>

css样式：

.allDiv1 {
	width: 30%;
	height: 100%;
	overflow-x: hidden;
	position: relative;
}

.part1 {
	box-shadow: 1px 2px 3px #eee;
	border: 1px solid #eee;
	text-align: center;
	line-height: 40px;
	color: red;
	font-size: 20px;
	position: absolute;
}

JS模块

<script>
	var htmlStr = ""; //动态生成div的字符串
	var _parentDom = ".allDiv1";//父节点的dom名称
	var _childDom = ".part1"; //子节点的dom名称
	var line = 5; //每个子节点之间的间距值
	var _divNum = 20; //子div的个数
	$(function () {
		//随机生成动态div;
		for (var i = 0; i < _divNum; i++) {
			htmlStr += "<div class='part1 pubu" + i + "'>" + i + "</div>";
		}
		$(".allDiv1").html(htmlStr);
		for (var i = 0; i < _divNum; i++) {
			$(".pubu" + i).css({ "height": randomNum(40, 100) + "px" })
		}
		//瀑布流布局
		waterFall(_parentDom, _childDom);
	})
	//生成从min - max区间内的随机数
	function randomNum(minNum, maxNum) {
		switch (arguments.length) {
		case 1:
		return parseInt(Math.random() * minNum + 1, 10); //10进制的意思，可以16，解析"A"
		break;
		case 2:
		return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
		break;
		default:
		return 0;
		break;
	}
}
//瀑布流的公共方法
function waterFall(parentDom, childDom) {
	//确定第一行个数
	var pageWidth = $(parentDom).width();
	var columns = 4; //每行展示4列
	var part1_width = parseInt(pageWidth / columns - line);
	$(childDom).width(part1_width);
	var arr = []; //用于存放每个div的高度值数组
	$(childDom).each(function (i) {
	//遍历调用每个值
	var _height = $(this).height();
	if (i < columns) { //第一列
	$(this).css({
	top: 0,
	left: (part1_width + line) * i //左偏移量
	});
	arr.push(_height);
	} else {
	debugger;
	//其他非第一行
	var minHeight = arr[0];
	var index = 0;//最小下标
	for (var k = 0; k < arr.length; k++) {
	if (arr[k] < minHeight) {
	index = k;
	minHeight = arr[k];
	}
	}
	//上面逻辑主要找到每次最低的那个
	//设置下一行的第一个位置 top值就是第一行的最低高度+间隙
	$(this).css({
	top: arr[index] + line,
	left: $(childDom).eq(index).css("left")
	})
	//这个时候最小列的高度就不再是原来的了，我们要进行修改了
	arr[index] = arr[index] + $(this).height() + line; //核心思想
	}
	})
}
// 页面尺寸改变时实时触发
window.onresize = function () {
	//重新定义瀑布流
	waterFall()
};
</script>

里面所有的div都是动态生成的，所以高度是随机的，每次都不一样，这样更能测试瀑布流的实效性，喜欢我的这篇文章的您可以点个小心心么！我们一起进步！加油。

		** 生活之所以艰辛，可能是你努力的还不够，加油！   —— 致陌生人 **
相关标签： 前端开发 CSS 自定义封装 html js javascript

上一篇： 手把手教你用 Python 执行 JS 代码

下一篇： 手把手教你用原生js实现轮播图特效

推荐阅读