当前位置:网站首页>以两列的瀑布流为例,我们应该怎么构建每一列的数组
以两列的瀑布流为例,我们应该怎么构建每一列的数组
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;
}
边栏推荐
- 动态规划:最长公共子串和最长公共子序列
- Idea shortcut keys
- 2022 tea master (intermediate) examination questions and analysis and tea master (intermediate) practical examination video
- Makefile demo
- Mysql Mac版下载安装教程
- FileZilla Client下载安装
- Numpy warning visibledeprecationwarning: creating an ndarray from ragged needed sequences
- [Blue Bridge Road - bug free code] pcf8591 - code analysis of AD conversion
- Makefile demo
- How to move towards IPv6: IPv6 Transition Technology - Shangwen network quigo
猜你喜欢

Appium automated testing framework

Numpy warning visibledeprecationwarning: creating an ndarray from ragged needed sequences

【刷题篇】接雨水(一维)

释放数据力量的Ceph-尚文网络xUP楠哥

User value is the last word in the competition of mobile phone market

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

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

105. SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍

Applet get user avatar and nickname

Without sxid, suid & sgid will be in danger- Shangwen network xUP Nange
随机推荐
How to move towards IPv6: IPv6 Transition Technology - Shangwen network quigo
没有sXid,suid&sgid将进入险境!-尚文网络xUP楠哥
【全民编程】《软件编程-讲课视频》【零基础入门到实战应用】
C语言HashTable/HashSet库汇总
Download and install node, NPM and yarn
FileZilla Client下载安装
Arlo's thinking about himself
在 .NET 6 项目中使用 Startup.cs
Ffmpeg one / more pictures synthetic video
2022 mobile crane driver examination registration and mobile crane driver operation examination question bank
2022 tea master (primary) examination questions and tea master (primary) examination question bank
2022 polymerization process examination questions and polymerization process examination skills
阿洛对自己的思考
Ffmpeg download and installation tutorial and introduction
Numpy warning visibledeprecationwarning: creating an ndarray from ragged needed sequences
Basic operations of mongodb [add, delete, modify, query]
[mathematical logic] propositional logic (propositional logic reasoning | formal structure of reasoning | inference law | additional law | simplification law | hypothetical reasoning | refusal | disju
2022 tea master (intermediate) examination questions and analysis and tea master (intermediate) practical examination video
105. SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍
105. Detailed introduction of linkage effect realization of SAP ui5 master detail layout mode