网页设计之瀑布流，排列图片img最好的方式之一【代码+注释=很详细！！！】

最新推荐文章于 2022-12-06 10:12:07 发布

xupengboo

最新推荐文章于 2022-12-06 10:12:07 发布

阅读量2.1k

点赞数 8

文章标签： javascript css html jQuery 瀑布流

本文链接：https://blog.csdn.net/IT_Holmes/article/details/116918599

版权

文章目录

1.什么是瀑布流？
2.制作瀑布流样式
3.瀑布流的scroll滚轮创建

操作之前，必须对以下知识语言熟悉：HTML、CSS、JavaScript和jQuery。

1.什么是瀑布流？

在我们百度搜索图片的时候经常看到，图片非常整齐排列有序的给你列出来,就好像下面图片一样。

在这里插入图片描述

图片会自动跟进，而不会错杂开来，就像瀑布一样，这就是网页设计的瀑布流样式。

2.制作瀑布流样式

首先，在百度中copy几张图片，保证能填满网页框架，来为网页添加img样式。

这里我复制了几张猫咪图片，放在了images目录下：
在这里插入图片描述
在编译器中构造相应代码，这里我用的sublime 编译器，使用其他的都可以，但是格式必须对的！！！

首先，创建一个html文件，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#main{
			position: relative;
		}
		.pin{
			padding:15px 0 0 15px;
			float: left;
		}
		.hox{
			padding: 5px;
			border: 1px solid #ccc;
			box-shadow: 0 0 6px #ccc;
			border-radius: 5px;
		}
		.box img{
			width: 236px;
			height: auto;
		}
	</style>
</head>
<body>
	<div id="main">
		<div class="pin">
			<div class="box">
				<img src="images/1.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/2.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/3.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/4.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/5.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/6.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/7.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/美女.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/8.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/9.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/10.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/11.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/12.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/13.jpg">
			</div>
		</div>

		<div class="pin">
			<div class="box">
				<img src="images/14.jpg">
			</div>
		</div>
	</div>

	<script type="text/javascript" src="pubu.js"></script>
</body>
</html>

然后，在写一个pubu.js文件程序，代码如下：

$(document).ready(function(){
	//等图片加载完成之后在显示
	$(window).on("load",function(){
		ImgLocation();
		var dataImg={"data":[{"src":"1.jpg"},{"src":"2.jpg"}]};
		$(window).scroll(function(){
			//获取最后一张图片距离顶端的高度-也就是他自身的一半。
			if(getSideHeight()){
				$.each(dataImg.data,function(index,value){
					var pin = $("<div>").addClass("pin").appendTo("#main");
					var box = $("<div>").addClass("box").appendTo(pin);
					var img = $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(box);
				});
				ImgLocation();
			}
		})
	})
});

function getSideHeight(){
	var box = $(".pin");
	var lastImgHeight = (box.last().get(0)).offsetTop - Math.floor(box.last().height()/2);
	var documentHeight = $(document).height();//获取当前窗口的一个高度
	var scrollHeight = $(window).scrollTop();//获取滚动的距离。
	return (lastImgHeight<documentHeight+scrollHeight)?true:false;

}

function ImgLocation(){
	var box=$(".pin"); //获得一个.pin的数组
	var boxWidth=box.eq(0).width(); //eq()方法返回带有被选元素的指定索引号的元素。
	var num=Math.floor($(window).width()/boxWidth); //一行能摆放图片的个数
	var numArr=[];
	box.each(function(index,value){ //each() 方法规定为每个匹配元素规定运行的函数。
		var boxHeight=box.eq(index).height();//获取每张图片的高度。
		//console.log(boxHeight);
		
		if (index<num) {//第一排图片
			numArr[index] = boxHeight;
		}else{//第二排图片
			//Math.min可以获得最小的一项，apply()方法可以获得项的值。
			var minboxHeight = Math.min.apply(numArr,numArr);
			// console.log(minboxHeight);
			//方法jQuery.inArray(value,数组,数组的索引值默值为0)
			//$.inArray() 函数用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1）
			var minIndex = $.inArray(minboxHeight,numArr); //得到最小高度图片的索引值
			// console.log(minIndex);
			$(value).css({
				position:"absolute",
				top:minboxHeight,
				left:box.eq(minIndex).position().left
			});

			numArr[minIndex] += box.eq(index).height(); //设定了一个新高度
		}
	})
}

注意图片存放的位置，我这里存放在了代码目录下的images目录下了。

完成上面操作，就可以运行来查看一下结果了。
在这里插入图片描述