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

问题描述

给定动态数量的项目，我必须(尽可能)平均分割屏幕.

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.

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

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.

推荐答案

首先你必须确定平均划分屏幕"是什么意思.这可能意味着每个项目都有一个首选的 x 与 y 比率.

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.

您可以使用以下算法，该算法有利于接近所需的 x 与 y 比率，而不是减少空白空间的数量.

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屋！