根据项目数量和屏幕比例进行分屏 [英] Split screen based on number of items and screen ratio

问题描述

所以我需要找到列和行的数量，基于这些数据屏幕大小/比例。

每个项目的大小并不重要，因为我会根据每列和每行的项目计算它们的百分比。

如果我有5个项目，那么（取决于屏幕比例），我可能在第一行中有3列，在第二行中有2列。没关系。

解决方案

首先，您必须决定平分屏幕的含义。
这可能意味着每个项目都有一个首选的x-y比率。

您可以使用以下有利于接近期望值的算法x-to-y比减少空白空间的数量。

  //将其设置为所需的x-to-y比。 
 const preferred_ratio = 1.2; 
 
函数calc_cols_rows（In：screen，In：num_items，Out：num_rows，Out：num_cols）{
 desired_aspect =（screen.width / screen.height）/ preferred_ratio; 
 
 //计算最接近所需方面的行数：
 num_rows = round（sqrt（num_items / desired_aspect））; 
 
 //计算所需的列数：
 num_cols = ceil（num_items / num_rows）; 
} 
  

I have to split the screen equally (as possible) given a dynamic number of items.

So i need to find the number of columns and rows based on the screen size/ratio.

Each item size is not important since i will calculate them in % based in the items per col and row.

If i have 5 items, then (depending on the screen ratio) i will probably have 3 columns in the 1st row and 2 columns in the 2nd row. That's ok.

解决方案

First you have to decide what you mean with "divide the screen equally". It probably means that there is a preferred x-to-y ratio for each item.

You could use the following algorithm that favors getting close to the desired x-to-y ratio over reducing the number of empty spaces.

// Set this to the desired x-to-y ratio.
const preferred_ratio = 1.2; 

function calc_cols_rows(In: screen, In: num_items, Out: num_rows, Out: num_cols) {
  desired_aspect = (screen.width / screen.height) / preferred_ratio;

  // Calculate the number of rows that is closest to the desired aspect:
  num_rows = round(sqrt(num_items / desired_aspect));

  // Calculate the required number of columns:
  num_cols = ceil(num_items / num_rows);
}

这篇关于根据项目数量和屏幕比例进行分屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！