手把手教你JS如何实现瀑布流布局(jquery)

前言:总所周知,瀑布流是一个很常见的一种布局方式,不受div的大小限制,其中针对不同高度的div做空间的充分利用,首先我们用随机高度,固定宽度生成一批div,你可以看看效果:
手把手教你JS如何实现瀑布流布局(jquery)_第1张图片
正文
不难发现都是杂乱无章的,都会在每行的最低框中放下一个。
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 += "
" + i + "
"
; } $(".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)