// 第一行浮动,通过css实现
// 类似于堆积木效果 比较第一行元素的高度,找到最矮的;
// 然后其他的元素开始依次找到永远时最矮的那个元素,
// 利用定位往上边放;(最矮的放上一个元素之后可能就不是最矮的啦,需要重新比较,找到新的矮的)
// 这只不过是堆积木翻过来的效果而已
*{margin: 0;padding: 0;}
#cont{position: relative; margin: 0 auto;}
#cont .box{float: left;padding: 4px;}
.imgbox{border:solid 1px black;border-radius: 15px;padding: 5px;}
.imgbox img{width: 200px;display: block;}
<div id="cont">
<div class="box">
<div class="imgbox">
<img src="图片随便放" alt="">
</div>
</div>
</div>
图片个数不限
<script>
//浏览器加载完毕后执行js
onload = function() {
var l = new liu();
l.sty();
}
class liu{
constructor(){
// 选择元素
this.kuan = document.documentElement.clientWidth;
this.cont = document.getElementById("cont");
this.box = document.querySelectorAll(".box");
// console.log(this.box);
}
// 完善布局
sty(){
// 首先确定一行最多能放多少元素 往下取整
this.maxnum = parseInt(this.kuan / this.box[0].offsetWidth);
// console.log(this.maxnum);
// 然后确定大框宽度
this.cont.style.width = this.maxnum * this.box[0].offsetWidth +"px";
// console.log(this.cont.style.width);
this.firstline();
this.otherline();
}
// 第一行,获取所有元素的最小高度放在同一个数组中,准备获取最小值;
firstline(){
this.heightArr = [];
for(let i=0;i<this.maxnum;i++){
this.heightArr.push(this.box[i].offsetHeight);
}
}
otherline(){
for (let i = this.maxnum; i < this.box.length; i++) {
// 找到最矮的
var min = getMin(this.heightArr);
// 获取最矮的索引(位置)
var minindex = this.heightArr.indexOf(min);
// 开始放
this.box[i].style.position = "absolute";
this.box[i].style.top = min + "px";
this.box[i].style.left = this.box[0].offsetWidth * minindex + "px";
// 重新计算放过之后的高度
this.heightArr[minindex] = this.heightArr[minindex] + this.box[i].offsetHeight;
// 通过循环依次排列
}
}
}
//封装排序方法
function getMin(arr){
var myarr = [];
for(var j=0;j<arr.length;j++){
myarr.push(arr[j]);
}
return myarr.sort((a,b)=>a-b)[0];
}
![效果图 类似小红书之类的网站](https://img-blog.csdnimg.cn/20200305215955106.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbmhhbmhhbjE=,size_16,color_FFFFFF,t_70)
页面瀑布流布局操作 .js
最新推荐文章于 2023-11-28 22:35:15 发布