当前位置:网站首页>以两列的瀑布流为例,我们应该怎么构建每一列的数组
以两列的瀑布流为例,我们应该怎么构建每一列的数组
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;
}
边栏推荐
- pytorch项目怎么跑?
- FileZilla Client下載安裝
- sigaction的使用
- C language hashtable/hashset library summary
- numpy之 警告VisibleDeprecationWarning: Creating an ndarray from ragged nested sequences
- Captura下载安装及在Captura配置FFmpeg
- Use of sigaction
- [Blue Bridge Road -- bug free code] DS18B20 temperature reading code analysis
- [mathematical logic] propositions and connectives (propositions | propositional symbolization | truth connectives | no | conjunction | disjunction | non truth connectives | implication | equivalence)
- Download and install node, NPM and yarn
猜你喜欢

Arduino application development - LCD display GIF dynamic diagram

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

没有sXid,suid&sgid将进入险境!-尚文网络xUP楠哥

简易版 微信小程序开发之for指令、上传图片及展示效果优化

node,npm以及yarn下载安装

PHP generates PDF tcpdf

在 .NET 6 项目中使用 Startup.cs

Leetcode: dynamic planning template

递归:深度优先搜索

Wechat applet + Alibaba IOT platform + Hezhou air724ug built with server version system analysis
随机推荐
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
2022 tea master (primary) examination questions and tea master (primary) examination question bank
nodejs基础:浅聊url和querystring模块
Dynamic programming: Longest palindrome substring and subsequence
FileZilla client download and installation
[mathematical logic] predicate logic (judge whether the first-order predicate logic formula is true or false | explain | example | predicate logic formula type | forever true | forever false | satisfi
Cnopendata China Customs Statistics
在 .NET 6 项目中使用 Startup.cs
pytorch怎么下载?pytorch在哪里下载?
"Designer universe" argument: Data Optimization in the design field is finally reflected in cost, safety and health | chinabrand.com org
Null and undefined
Ansible introduction [unfinished (semi-finished products)]
numpy之 警告VisibleDeprecationWarning: Creating an ndarray from ragged nested sequences
QSAR model establishment script based on pytoch and rdkit
Is pytorch difficult to learn? How to learn pytorch well?
Dynamic programming: longest common substring and longest common subsequence
golang xxx. Go code template
2022 mobile crane driver examination registration and mobile crane driver operation examination question bank
Nodejs Foundation: shallow chat URL and querystring module
释放数据力量的Ceph-尚文网络xUP楠哥