假设需要加载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; }
效果:

随机高度:

 

 

 

技术
©2019-2020 Toolsou All rights reserved,
JVM概述VUE+Canvas 实现桌面弹球消砖块小游戏javascript事件(零基础详解)Pikachu漏洞练习平台明解c/c++程序的内存模型--内存四区python实现vlookup_干货一:怎么在python里面实现vlookupswift 5.0 创建一个获取验证码的按钮,实现倒计时效果首期500亿,成立新部门,腾讯准备做什么?关于蓝桥杯大赛,你应该了解的那些事!解决Selenium ActionChains拖动元素无效