网页设计之瀑布流，排列图片img最好的方式之一代码+注释=很详细！！！
Posted IT_Holmes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页设计之瀑布流，排列图片img最好的方式之一代码+注释=很详细！！！相关的知识，希望对你有一定的参考价值。
操作之前，必须对以下知识语言熟悉：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目录下了。
完成上面操作，就可以运行来查看一下结果了。
3.瀑布流的scroll滚轮创建
在上面代码中，运行后可以发现，可以不断重复1.jpg和2.jpg，中间加入了scroll滚轮和元素创建的一些相关内容，一定要仔细理解注释！！ 滚轮样式如图下：
循环出现，1.jpg和2.jpg的图片了。
这样就完成了一个瀑布流的图片显示。
以上是关于网页设计之瀑布流，排列图片img最好的方式之一代码+注释=很详细！！！的主要内容，如果未能解决你的问题，请参考以下文章