Início / coding / Perguntas / 78994528
Accepted
HareSurf
Asked: 2024-09-17 22:26:23 +0800 CST

Como calcular o número de colunas de modo que cada linha tenha todos os números pares ou ímpares de itens, da forma mais compacta possível?

  • 772

Gostaria de dispor glifos unicode semelhantes a este :

Pode haver de 13 a 100 itens na coleção exibida (alfabetos, abjads, abugidas, silabários, etc.), então pode haver um conjunto com 99 itens, ou um com 16 itens, etc.

Como você pode dispor os elementos de forma mais bonita (e automática) (para que também fique bonito quando responsivo)? Aqui está o que eu tenho por padrão com o flexbox:

insira a descrição da imagem aqui

Cada item tem uma altura fixa e a largura é responsiva (mas a mesma para cada elemento).

O objetivo é que cada linha tenha um número par ou ímpar de itens. Dessa forma, todas as colunas verticais ficarão alinhadas (e não fará o que meu gif animado está fazendo, onde linhas pares/ímpares são intercaladas).

  1. É possível fazer alguma fórmula matemática para calcular algo como "você precisa de 5 itens por linha, exceto que a última linha terá 3 (ou 1)"? Dada alguma contagem total como 99?

Como você faria isso?

Eu tenho um componente React que faz o layout do Flexbox como <Grid minWidth={96} gap={8} maxColumns={5} breakpoints={[5, 3, 1]} />, onde breakpointsestão o número de itens permitidos por linha, e maxColumnssão as colunas máximas (breakpoints/maxColumn é meio redundante, você pode definir qualquer um ou, talvez eu limpe isso mais tarde) . Todas essas informações podem ser irrelevantes, mas apenas apontando para o caso, é meu componente de grade responsivo.

Como posso dividir meu total por x para descobrir se deve haver linhas pares ou ímpares e, então, definir o maxColumnsou breakpointspara o que for "mais compacto"? Então, por exemplo:

  • Se forem 26 elementos , ficaria melhor com 6 linhas de 4, seguidas de 1 linha de 2. - Se forem 27 elementos ,

A "beleza" disso pode ser subjetiva, e não há uma regra clara para o que é mais bonito. Apenas procurando por qualquer coisa que não deixe facilmente um nó único órfão no final e então tenha 7 itens em todas as outras linhas. Idealmente, temos:

  • Entre 3 e 7 colunas.
  • A última linha deve ter o mesmo número de itens em todas as linhas anteriores, ou não menos que isso maxRowCount - 2(portanto, se todas as linhas tiverem 7, a última linha poderá ter 5 ou apenas 7, ou se todas as linhas tiverem 5, a última linha poderá ter apenas 3 ou 5, etc.).
  • O item de linha tem um minWidth: 96px, e cresce para preencher o espaço. Posso descobrir como tornar as coisas responsivas quando tivermos o básico disso funcionando, mas suponha que a containerWidthexista.

Então, na minha cabeça, digamos que temos containerWidth === 700px. Então, 700/96 == 7+, então talvez 7 por linha. Se tivermos 99 itens (por exemplo), então 99 % 7 == 1, então 7não vai funcionar porque teremos 1 na última linha. 6não vai funcionar porque 99é par, então tente 5? 99 % 5 == 4, isso não vai funcionar porque 4é par. Então tente 3, 99 % 3 == 0, então isso funcionaria como está, use isso!

Como você implementaria algo assim?

javascript

2 respostas

  1. Algo assim parece correto, mas será que resolvi corretamente?

    console.log(
  99,
  calculateColumns({ totalCount: 99, itemWidth: 96, containerWidth: 700 })
);
console.log(
  98,
  calculateColumns({ totalCount: 98, itemWidth: 96, containerWidth: 700 })
);
console.log(
  97,
  calculateColumns({ totalCount: 97, itemWidth: 96, containerWidth: 700 })
);
console.log(
  96,
  calculateColumns({ totalCount: 96, itemWidth: 96, containerWidth: 700 })
);
console.log(
  95,
  calculateColumns({ totalCount: 95, itemWidth: 96, containerWidth: 700 })
);
console.log(
  94,
  calculateColumns({ totalCount: 94, itemWidth: 96, containerWidth: 700 })
);
console.log(
  93,
  calculateColumns({ totalCount: 93, itemWidth: 96, containerWidth: 700 })
);
console.log(
  91,
  calculateColumns({ totalCount: 91, itemWidth: 96, containerWidth: 700 })
);

function calculateColumns({ totalCount, itemWidth, containerWidth }) {
  let max = Math.min(Math.floor(containerWidth / itemWidth), 7)
  while (max > 3) {
    const maxIsEven = isEven(max)
    const remainder = totalCount % max
    const remainderIsEven = isEven(remainder)
    if (maxIsEven && remainderIsEven) {
      const diff = max - remainder
      if (diff <= 2) {
        return max
      }
    } else if (!maxIsEven && (!remainderIsEven || !remainder)) {
      const diff = max - remainder
      if (diff <= 2) {
        return max;
      }
    } else {
      // one is even, one is odd
    }
    max--
  }
  return max
}

function isEven(n) {
  return n % 2 === 0
}

    • -1
  2. Best Answer

    Aqui está um exemplo que testa repetidamente se o número de colunas corresponde aos seus critérios

    const ranges = [ 
  [0x2600, 0x26FF], // Symbols
  [0x2700, 0x27BF], // Dingbats
  [0x1F300, 0x1F5FF] // Symbols and Pictographs
];

const randomUnicodeGlyph = () => {
  const range = ranges[Math.floor(Math.random() * ranges.length)];
  const codePoint = Math.floor(range[0] + Math.random() * (range[1] - range[0] + 1));
  return String.fromCodePoint(codePoint);
};

// Generate a set of random Unicode glyphs
const generateGlyphSet = (length) => Array.from({ length }, randomUnicodeGlyph);

// Calculate the best number of columns per row
const calculateColumns = (totalItems, minItemWidth, containerWidth) => {
  const minColumns = 3;
  const maxColumns = 7;
  let possibleColumns = Math.min(Math.floor(containerWidth / minItemWidth), maxColumns);

  for (let columns = possibleColumns; columns >= minColumns; columns--) {
    let rows = Math.floor(totalItems / columns);
    let lastRowItems = totalItems % columns;

    if (lastRowItems === 0 || lastRowItems >= (columns - 2)) {
      return columns;
    }
  }
  return minColumns; // fallback
};

// HTML table for the glyph set
const createTable = (glyphSet, containerWidth, minItemWidth) => {
  const columns = calculateColumns(glyphSet.length, minItemWidth, containerWidth);
  return `
      <table class="glyph-table">
        <tr>${glyphSet.map((glyph, index) => 
          `<td>${glyph}</td>${(index + 1) % columns === 0 && (index + 1 !== glyphSet.length) ? '</tr><tr>' : ''}`
        ).join('')}
        </tr>
      </table><hr/>`;
};

// Generate three sets of glyphs with random lengths between 13 and 100
const sets = [
  generateGlyphSet(16),
  generateGlyphSet(26),
  generateGlyphSet(99)
];

const containerWidth = 700;
const minItemWidth = 96;
document.body.innerHTML = sets.map(set => createTable(set, containerWidth, minItemWidth)).join('');
    .glyph-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.glyph-table td {
  height: 96px;
  text-align: center;
  font-size: 24px;
  padding: 3px;
}

    • -1

relate perguntas