假设需要加载3组图片,图片高度分别为
[20,10,30,40,50]
[60,90,70,80,100]
[100,100,100,100,100]
对于第一排
第一排直接显示就可以了,当前高度数组为 [20,10,30,40,50]
对于第二排
先考虑第1张,高60,而上一排最小高度为10,在第 2 列,所以把这张排到第 2 列,更新高度数组为[20,10+60,30,40,50]
第2张,高90,现在最小高度为20,在第 1 列,所以把这张排到第1列,更新高度数组为[20+90,70,30,40,50]
第3张,高70,现在最小高度为30,在第 3 列,所以把这张排到第3列,更新高度数组为[110,70,30+70,40,50]
....类推
示例代码
for (let i = 0; i < 15; i++) { //先定它个15个div
var div = document.createElement("div");
div.className = "item";
div.style.height = i * 10 + 10 + "px"; //假设图片高度,要替换成实际图片高度 。
document.body.appendChild(div);
}
var heightArray = [], //存储每列的高度。
columns = 5; //假设为5列;
for (let i = 0; i < 15; i++) {
// 遍历所有div,对他们设置left和top值
var currentDiv = document.getElementsByClassName("item")[i];
if (i < columns) { //i<columns说明为第一排
currentDiv.style.top = 0; //第一排top值为0
currentDiv.style.left = i * 100 + "px"; // 第一张left:0,第二张left:100...
heightArray[i] = currentDiv.offsetHeight; // 第1排直接设置
} else {// 非第1排
var minHeight = Math.min.apply(null, heightArray); //找到高度最小值
var minIndex = heightArray.indexOf(minHeight); //找到最小值所在列
currentDiv.style.top = minHeight + "px"; // 设置top值
currentDiv.style.left = minIndex * 100 + "px"; //设置left值
heightArray[minIndex] += currentDiv.offsetHeight; // 更新高度数组。
}
}
css:
body {
position: relative;
}
.item {
margin: 20px;
width: 100px;
border: 1px solid red;
position: absolute;
box-sizing: border-box;
}
效果:
随机高度:
本文地址:https://blog.csdn.net/illusion_melody/article/details/84259142
您可能感兴趣的文章:
- vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents
- axios 处理 302 状态码的解决方法
- [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature
- react-native 在新版Xcode(10+)中运行出现的问题: node_modules/react-native/third-party/glog-0.3.4 , C compiler cannot create executables
- 使用puppeteer爬取网站并抓出404无效链接
- 【angular2+typeScript+ng-zorro】Carousel 走马灯的左右方向控件实现
- Cannot read property 'tap' of undefined
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论