当前位置:网站首页>以两列的瀑布流为例,我们应该怎么构建每一列的数组
以两列的瀑布流为例,我们应该怎么构建每一列的数组
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;
}
边栏推荐
- 2022 Shandong Province safety officer C certificate examination questions and Shandong Province safety officer C certificate simulation examination question bank
- 递归使用和多维数组对象变一维数组对象
- Appium automated testing framework
- leetcode:动态规划模板
- 简易版 微信小程序开发之页面跳转、数据绑定、获取用户信息、获取用户位置信息
- 【全民编程】《软件编程-讲课视频》【零基础入门到实战应用】
- 【DRM】DRM bridge驱动调用流程简单分析
- Wechat applet + Alibaba IOT platform + Hezhou air724ug built with server version system analysis
- PHP generates PDF tcpdf
- 105. SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍
猜你喜欢
MySQL MAC download and installation tutorial
Download and install captura and configure ffmpeg in captura
pytorch怎么下载?pytorch在哪里下载?
ffmpeg录制屏幕和截屏
Numpy warning visibledeprecationwarning: creating an ndarray from ragged needed sequences
小程序获取用户头像和昵称
Nanning water leakage detection: warmly congratulate Guangxi Zhongshui on winning the first famous brand in Guangxi
2022 Shandong Province safety officer C certificate examination questions and Shandong Province safety officer C certificate simulation examination question bank
Is pytorch difficult to learn? How to learn pytorch well?
FileZilla client download and installation
随机推荐
[Blue Bridge Road - bug free code] pcf8591 - code analysis of AD conversion
Table structure of Navicat export database
【DRM】DRM bridge驱动调用流程简单分析
Reflection and planning of a sophomore majoring in electronic information engineering
Cnopendata China Customs Statistics
Web session management security issues
How to execute a swift for in loop in one step- How can I do a Swift for-in loop with a step?
Arduino application development - LCD display GIF dynamic diagram
动态规划:最长公共子串和最长公共子序列
node,npm以及yarn下载安装
In Net 6 project using startup cs
The difference between static web pages and dynamic web pages & the difference between Web1.0 and Web2.0 & the difference between get and post
Advanced redis applications [password protection, data persistence, master-slave synchronization, sentinel mode, transactions] [not completed yet (semi-finished products)]
记一次 .NET 差旅管理后台 CPU 爆高分析
FileZilla Client下载安装
Commands related to the startup of redis under Linux server (installation and configuration)
What can learning pytorch do?
2022 Shandong Province safety officer C certificate examination questions and Shandong Province safety officer C certificate simulation examination question bank
PHP generates PDF tcpdf
动态规划:最长回文子串和子序列