当前位置:网站首页>以两列的瀑布流为例,我们应该怎么构建每一列的数组
以两列的瀑布流为例,我们应该怎么构建每一列的数组
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;
}
边栏推荐
- SAP ui5 application development tutorial 105 - detailed introduction to the linkage effect implementation of SAP ui5 master detail layout mode
- navicat 导出数据库的表结构
- Hutool动态添加定时任务
- Write it down once Net travel management background CPU Explosion Analysis
- 2.14 simulation summary
- 阿洛对自己的思考
- [home push IMessage] software installation virtual host rental tothebuddy delay
- Mongodb installation & Deployment
- SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍
- IPv6 transition technology-6to4 manual tunnel configuration experiment -- Kuige of Shangwen network
猜你喜欢

In Net 6 project using startup cs

递归:一维链表和数组

【刷题篇】 找出第 K 小的数对距离

2022 tea master (intermediate) examination questions and analysis and tea master (intermediate) practical examination video

Error in compiled file: error: unmapped character encoding GBK
![[embedded module] OLED display module](/img/c4/474f5ee580d132654fbd1a4cd53bab.jpg)
[embedded module] OLED display module

Appium automated testing framework

递归:快速排序,归并排序和堆排序

Wechat applet + Alibaba IOT platform + Hezhou air724ug build a serverless IOT system (III) -- wechat applet is directly connected to Alibaba IOT platform aliiot

node,npm以及yarn下载安装
随机推荐
Shardingsphere dynamic data source
Filter
ffmpeg下载安装教程及介绍
pytorch是什么?pytorch是一个软件吗?
Recursion: one dimensional linked lists and arrays
2022 P cylinder filling examination content and P cylinder filling practice examination video
SAP UI5 应用开发教程之一百零五 - SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍
Error c2694 "void logger:: log (nvinfer1:: ilogger:: severity, const char *)": rewrite the restrictive exception specification of virtual functions than base class virtual member functions
MySQL MAC download and installation tutorial
没有sXid,suid&sgid将进入险境!-尚文网络xUP楠哥
Leetcode: dynamic planning template
[Yu Yue education] reference materials of political communication science of Communication University of China
FileZilla Client下載安裝
105. SAP UI5 Master-Detail 布局模式的联动效果实现明细介绍
8.8.2-PointersOnC-20220214
Numpy warning visibledeprecationwarning: creating an ndarray from ragged needed sequences
IPv6 transition technology-6to4 manual tunnel configuration experiment -- Kuige of Shangwen network
numpy之 警告VisibleDeprecationWarning: Creating an ndarray from ragged nested sequences
sigaction的使用
Basic operations of mongodb [add, delete, modify, query]