当前位置:网站首页>以两列的瀑布流为例,我们应该怎么构建每一列的数组
以两列的瀑布流为例,我们应该怎么构建每一列的数组
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;
}
边栏推荐
- Web session management security issues
- Ansible introduction [unfinished (semi-finished products)]
- Applet (continuous update)
- 阿洛对自己的思考
- 递归:深度优先搜索
- Is pytorch difficult to learn? How to learn pytorch well?
- C语言HashTable/HashSet库汇总
- Shardingsphere dynamic data source
- FileZilla Client下載安裝
- Téléchargement et installation du client Filezilla
猜你喜欢

2022 polymerization process examination questions and polymerization process examination skills
![[Apple Photo Album push] IMessage group anchor local push](/img/a7/6a27d646ecba0d7c93f8dac38492a2.jpg)
[Apple Photo Album push] IMessage group anchor local push

Recursion: one dimensional linked lists and arrays

SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍

Download and install captura and configure ffmpeg in captura

小程序获取用户头像和昵称

IPv6过渡技术-6to4手工隧道配置实验--尚文网络奎哥

nodejs基础:浅聊url和querystring模块
![[home push IMessage] software installation virtual host rental tothebuddy delay](/img/e7/eb20a773e4b674962f856d179a3769.jpg)
[home push IMessage] software installation virtual host rental tothebuddy delay

Cnopendata China Customs Statistics
随机推荐
leetcode:297. 二叉树的序列化与反序列化
[MySQL] the difference between left join, right join and join
Appium自动化测试框架
Message queue addition failure
[mathematical logic] predicate logic (predicate logic basic equivalent | eliminate quantifier equivalent | quantifier negative equivalent | quantifier scope contraction expansion equivalent | quantifi
[Apple Push] IMessage group sending condition document (push certificate) development tool pushnotification
In Net 6 project using startup cs
FileZilla client download and installation
Arduino application development - LCD display GIF dynamic diagram
[home push IMessage] software installation virtual host rental tothebuddy delay
Recursion: quick sort, merge sort and heap sort
[daily question] dichotomy - find a single dog (Bushi)
Write it down once Net travel management background CPU Explosion Analysis
小程序获取用户头像和昵称
TCP, the heavyweight guest in tcp/ip model -- Kuige of Shangwen network
如何迈向IPv6之IPv6过渡技术-尚文网络奎哥
ffmpeg下载安装教程及介绍
[Blue Bridge Road -- bug free code] DS18B20 temperature reading code analysis
ffmpeg录制屏幕和截屏
pytorch开源吗?