<style>
*{
margin: 0;
padding: 0;
}
.mian{
min-height: 400px;
position: relative; /*pic会定位*/
}
.mian .pic{
float: left;
padding: 5px;
}
.mian .pic img{
width: 165px;
padding: 5px;
border-radius:10px;
}
</style>
</head>
<body>
<div class="mian">
<div class="pic"><img src="img2/1.jpg" alt=""></div>
<div class="pic"><img src="img2/2.jpg" alt=""></div>
<div class="pic"><img src="img2/3.jpg" alt=""></div>
<div class="pic"><img src="img2/4.jpg" alt=""></div>
<div class="pic"><img src="img2/5.jpg" alt=""></div>
<div class="pic"><img src="img2/6.jpg" alt=""></div>
<div class="pic"><img src="img2/7.jpg" alt=""></div>
<div class="pic"><img src="img2/8.jpg" alt=""></div>
<div class="pic"><img src="img2/9.jpg" alt=""></div>
<div class="pic"><img src="img2/10.jpg" alt=""></div>
<div class="pic"><img src="img2/11.jpg" alt=""></div>
<div class="pic"><img src="img2/12.jpg" alt=""></div>
<div class="pic"><img src="img2/13.jpg" alt=""></div>
<div class="pic"><img src="img2/14.jpg" alt=""></div>
<div class="pic"><img src="img2/15.jpg" alt=""></div>
<div class="pic"><img src="img2/16.jpg" alt=""></div>
<div class="pic"><img src="img2/17.jpg" alt=""></div>
<div class="pic"><img src="img2/18.jpg" alt=""></div>
<div class="pic"><img src="img2/19.jpg" alt=""></div>
<div class="pic"><img src="img2/20.jpg" alt=""></div>
<div class="pic"><img src="img2/21.jpg" alt=""></div>
<div class="pic"><img src="img2/22.jpg" alt=""></div>
<div class="pic"><img src="img2/23.jpg" alt=""></div>
<div class="pic"><img src="img2/24.jpg" alt=""></div>
<div class="pic"><img src="img2/25.jpg" alt=""></div>
<div class="pic"><img src="img2/26.jpg" alt=""></div>
<div class="pic"><img src="img2/27.jpg" alt=""></div>
<div class="pic"><img src="img2/28.jpg" alt=""></div>
<div class="pic"><img src="img2/29.jpg" alt=""></div>
<div class="pic"><img src="img2/30.jpg" alt=""></div>
</div>
<script>
//主要思想
//瀑布流布局--将所有的图片放在一个大的div中,同时让每个图片用单独div包起来
//先自然布局,让其浮动排列
//获取元素后,计算下屏幕能放多少个图片(屏幕宽/图片宽),让其居中
//获取所有图片div,遍历获取一排的个数(所以需要屏幕能放的图片数--列数)
//求出一行中最小高度--让剩下的div定位到它下面
//最后高度更新,arryHeight[mindex] += picHeight,重新+=到获取的高度数组中
//又动态改变了最小高度的数组值
window.onload=function(){ //页面加载的问题,这里是动态获取,让html全部加载完,在执行
//获取元素
var pics=document.querySelectorAll(".pic")
var mian=document.querySelector(".mian")
//获取屏幕宽度,看一排的、能放几个
var screenWidth=document.body.offsetWidth//获取屏幕的宽
var picWidth=pics[0].offsetWidth
//个数
var clos=Math.floor(screenWidth/picWidth)//看看一排最多放几个
//将mian居中
mian.style.width=clos* picWidth+"px" //设置宽,然后居中
mian.style.margin="0 auto"
//数组--一排的
var arryHeight=[] //建立一个空数组,待会把一排的数组装进去
for(var i=0;i<pics.length;i++){
var picHeight=pics[i].offsetHeight //装所有的
if(i<clos){
arryHeight.push(picHeight) //通过判断小于列数,取出,并添加
}else{
console.log(i);//6-29
//求一行中最小高度
var minarryHeight=Math.min.apply(null,arryHeight)
//求最小高度的下标
var mindex=getIndex(arryHeight,minarryHeight)
//给剩下的定位到最小高度下面那个
pics[i].style.position="absolute"
pics[i].style.left= mindex*picWidth+"px"
pics[i].style.top= minarryHeight+"px"
//动态更新高度
arryHeight[mindex] += picHeight
}
}
//求下标
function getIndex(arr,val){ //求最小高度的下标
for(var j=0;j<arr.length;j++){
if(arr[j]==val){
return j
}
}
}
}
</script>
js瀑布流布局
最新推荐文章于 2022-07-13 19:42:16 发布