根據項目數量和屏幕比例分割屏幕

Question

如果給出動態數量的項目，我必須平分屏幕（儘可能）。

所以我需要根據屏幕大小/比例找到列數和行數。

每個項目的大小並不重要，因爲我會根據每列和每行的項目計算它們的百分比。

如果我有5個項目，然後（取決於屏幕比例）我可能會有第1行3列和第2行2列。沒關係。

Answer 1

首先，您必須決定「平分屏幕」的含義。 這可能意味着每個項目都有一個首選的x-y比率。

您可以使用以下算法來減少空白空間的數量，從而有利於接近所需的x-y比率。

// 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); 
}