math - 項目数と画面比率で画面分割

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