原来写瀑布流这么简单，你来你也行(三种方法实自适应现瀑布流)

最新推荐文章于 2021-09-16 21:29:56 发布

GHUIJS

最新推荐文章于 2021-09-16 21:29:56 发布

阅读量1k

点赞数 2

分类专栏： js html 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/m0_43599959/article/details/109268364

版权

js 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

html

5 篇文章 1 订阅

订阅专栏

本文介绍了三种实现瀑布流布局的方法：使用JQuery、CSS3 column和flex布局。每种方法都有其特点，JQ方案适合动态调整，column和flex依赖CSS，更适用于静态或元素数量确定的场景。JQ方案符合主流审美，而column和flex布局则提供了不同的滚动体验。在实际应用中，开发者可根据项目需求选择合适的技术实现。

摘要由CSDN通过智能技术生成

效果:

一、JQ实现自适应瀑布流

思路分析：

1.瀑布流效果就是等宽不等高，即每个元素的宽度是一样的；

2.通过js监听页面宽度变化，改变每个元素的宽，实现列数变化；

3.通过列数，计算给该给每个元素的left，top值，实现瀑布流定位；

4.从每列第二个元素开始，追加高度。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			* {
				margin: 0;
				font-size: 0;
			}

			.img_item {
				box-sizing: border-box;
				border: 5px solid #fff;
			}

			.box {
				position: relative;
				height: 50px;
				width: calc(100% - 40px);
				margin: 20px;
			}
		</style>
		<script src="code/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="waterfallFlowBOx box">
			<img src="jsbase/瀑布流/picture/1.jpg" alt="" class="img_item">
			//此处省略100个img标签
			<img src="jsbase/瀑布流/picture/9.jpg" alt="" class="img_item">
		</div>

	</body>
	<script type="text/javascript">
		window.onload = function() {
			(function(docs, win) {
				waterfallFlow();
				window.onresize = function() {
					waterfallFlow();
				}
			})(document, window);
		}

		function waterfallFlow() {
			var box = $(".img_item");
			var value = $(".waterfallFlowBOx").outerWidth(); //获取父级的宽度

			var deviceWidth = Math.max(750, value) //当父级宽度小于750时，

			let cols = Math.floor(deviceWidth / 500);

			$(".img_item").css("width", Math.ceil(value / cols) + "px");

			var boxwidth = $(".img_item").outerWidth();

			//创建数组
			var heightArr = [];
			//图片遍历循环，除第一 排不需要定位，取高度值其它排定位处理
			box.each(function(index, item) {
				//求出图片的高度
				var itemheight = $(item).outerHeight();
				//是不是第一 排
				if (index < cols) {
					heightArr[index] = itemheight;
					$(item).css({
						position: "absolute",
						top: 0,
						left: index * boxwidth + "px"
					})
				} else {
					//最小图片的高度
					var minitemheight = Math.min(...heightArr);
					//最小的索引$. inArray()用于查找数组中指定值，返回索引( 未匹配返回-1)
					// console.log(heightArr);
					var minheightindex = $.inArray(minitemheight, heightArr)
					// console.log(minheightindex)
					$(item).css({
						position: "absolute",
						top: minitemheight + "px",
						left: minheightindex * boxwidth + "px"
					})
					//高度追加
					heightArr[minheightindex] += itemheight;
				}
			})
		}
	</script>
</html>

二、column 多行布局实现瀑布流

思路分析：

column 实现瀑布流主要依赖两个属性。
一个是 column-count 属性，是分为多少列。
一个是 column-gap 属性，是设置列与列之间的距离。

代码实现：

<!DOCTYPE html>
<html>
<head>
    <style>
		*{
			margin: 0;
			padding: 0;
		}
        .box {
            column-gap: 10px;
        }
        .item {
            margin-bottom: 5px;
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img src="jsbase/瀑布流/picture/1.jpg" alt="" />
    </div>
	//标签省略
	<div class="item">
	    <img  src="jsbase/瀑布流/picture/8.jpg" alt="" />
	</div>
</div>
<script type="text/javascript">
	window.onload = function(){
		(function(docs, win) {
			htmlSize = function() {
				var value = document.documentElement.clientWidth
				var deviceWidth = Math.max(750, value);
				document.querySelector(".box").style.columnCount = Math.floor(deviceWidth / 500);
			};
			htmlSize();
			window.onresize = function(){
				htmlSize();
			}
		})(document, window);
	}
</script>
</body>

三、flex 弹性布局实现瀑布流

思路分析：

1.利用弹性纵向布局，并且允许换行。

代码实现：

<!DOCTYPE html>
<html>
<head>
	<style>
		.box {
		  display: flex;  
		  flex-flow:column wrap;
		  height: 100vh;
		  overflow-y: scroll;
		}
		.item {
			margin: 10px;
			/* width: calc(100%/3 - 20px); */
		}
		.item img{
			width: 100%;
			height:100%;
		}
</style>
</head>
<body>
	<div class="box">
		<div class="item">
			<img src="jsbase/瀑布流/picture/1.jpg" alt="" />
		</div>
		//...标签省略
		<div class="item">
			<img src="jsbase/瀑布流/picture/8.jpg" alt="" />
		</div>
	</div>
	<script type="text/javascript">
		window.onload = function() {
			(function(docs, win) {
				htmlSize = function() {
					var value = document.documentElement.clientWidth
					var deviceWidth = Math.max(750, value);
					console.log(`calc(100% / ${Math.ceil(deviceWidth / 500)})`);
					document.querySelector(".item").style.width = `calc(100% / ${Math.floor(deviceWidth / 500)})`;
				};
				htmlSize();
				window.onresize = function() {
					htmlSize();
				}
			})(document, window);
		}
	</script>
</body>