当前位置:网站首页>以两列的瀑布流为例,我们应该怎么构建每一列的数组
以两列的瀑布流为例,我们应该怎么构建每一列的数组
2022-07-03 03:56:00 【Attacking-Coder】
思路
往高度最小的那一列添加新的图片元素,直到它比另一列长了。此时就接着往短的那一列添加元素
代码(事例)
// data是包含瀑布流所有图片信息的数组
// numberOfColumns 代表的是瀑布流列数,咱们案例是2列
function classifyData(data: any[], numberOfColumns: number): any[] {
const result: any[] = [];
// 数组初始化
for (let i = 0; i < numberOfColumns; i++) {
result.push({
height: 0,
contents: []
});
}
data.forEach((item) => {
const minHeight = Math.min(...result.map((list) => list.height));
const minList = result.find((list) => list.height === minHeight);
// 这个函数的原则就是那一列短就往那一列后边补充数组
minList.contents.push(item);
minList.height += item.width === 0 ? 0 : item.height / item.width;
});
return result;
}
边栏推荐
- 阿洛对自己的思考
- Error c2694 "void logger:: log (nvinfer1:: ilogger:: severity, const char *)": rewrite the restrictive exception specification of virtual functions than base class virtual member functions
- shardingsphere动态数据源
- NPM: the 'NPM' item cannot be recognized as the name of a cmdlet, function, script file, or runnable program. Please check the spelling of the name. If the path is included, make sure the path is corr
- docker安装及启动mysql服务
- [mathematical logic] predicate logic (predicate logic basic equivalent | eliminate quantifier equivalent | quantifier negative equivalent | quantifier scope contraction expansion equivalent | quantifi
- FileZilla Client下載安裝
- C语言HashTable/HashSet库汇总
- Is pytorch difficult to learn? How to learn pytorch well?
- How does the pytorch project run?
猜你喜欢

SAP ui5 application development tutorial 105 - detailed introduction to the linkage effect implementation of SAP ui5 master detail layout mode

pytorch怎么下载?pytorch在哪里下载?

FileZilla Client下載安裝

2022 P cylinder filling examination content and P cylinder filling practice examination video

在写web项目的时候,文件上传用到了smartupload,用了new string()进行转码,但是在数据库中,还是会出现类似扑克的乱码

Role of JS No

nodejs基础:浅聊url和querystring模块

递归:深度优先搜索

2022 mobile crane driver examination registration and mobile crane driver operation examination question bank

Bisher - based on SSM pet adoption center
随机推荐
sigaction的使用
中移物联网OneOS与OneNET入选《2021年物联网示范项目名单》
Wechat applet + Alibaba IOT platform + Hezhou air724ug build a serverless IOT system (III) -- wechat applet is directly connected to Alibaba IOT platform aliiot
Recursion: quick sort, merge sort and heap sort
【刷题篇】接雨水(一维)
shardingsphere动态数据源
TCP, the heavyweight guest in tcp/ip model -- Kuige of Shangwen network
Use of sigaction
在写web项目的时候,文件上传用到了smartupload,用了new string()进行转码,但是在数据库中,还是会出现类似扑克的乱码
JMeter starts from zero (III) -- simple use of regular expressions
105. SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍
pytorch难学吗?如何学好pytorch?
QSAR model establishment script based on pytoch and rdkit
Recursion: one dimensional linked lists and arrays
小程序获取用户头像和昵称
Shardingsphere dynamic data source
Ffmpeg download and installation tutorial and introduction
[Blue Bridge Road -- bug free code] interpretation of some codes of matrix keyboard
Simple wechat applet development page Jump, data binding, obtaining user information, obtaining user location information
[learning notes] seckill - seckill project - (11) project summary