主页 / coding / 问题 / 78994528
Accepted
HareSurf
Asked: 2024-09-17 22:26:23 +0800 CST

如何以尽可能紧凑的方式计算列数，使得每一行都包含偶数或奇数个项目？

  • 772

我想要布局与此类似的unicode字形：

所展示的集合 (字母表、辅音字母、元音附标文字、音节文字等) 可能有 13 到 100 个项目，因此可能有一组包含 99 个项目，或者一组包含 16 个项目，等等。

如何才能最美观地（自动地）布局元素（以便在响应时也能很好地布局）？这是我默认使用 flexbox 的情况：

在此处输入图片描述

每个项目都有固定的高度，并且宽度是响应的（但每个元素都相同）。

目标是让每行包含偶数或奇数个项目。这样所有垂直列都会对齐（并且不会像我的动画 gif 那样，偶数行/奇数行混杂在一起）。

  1. 是否可以用数学公式来计算“每行需要 5 个项目，但最后一行有 3 个（或 1 个）”之类的东西？给出总数，例如 99？

您可能会怎样做呢？

我有一个 React 组件，它执行 Flexbox 布局，例如<Grid minWidth={96} gap={8} maxColumns={5} breakpoints={[5, 3, 1]} />，其中breakpoints是每行允许的项目数，maxColumns是最大列数（断点/maxColumn 有点多余，您可以定义其中一个，也许我稍后会清理它）。所有这些信息可能都不相关，但以防万一，这只是我的响应式网格组件。

我怎样才能以某种方式将总数除以 x来确定它应该是偶数行还是奇数行，然后将maxColumns或设置breakpoints为“最紧凑”的值？例如：

  • 如果有26 个元素，则最好是 6 行，每行 4 个，然后是 1 行，每行 2 个。- 如果有27 个元素，

它的“美”可能是主观的，并没有明确的规则来定义什么是最美的。只是寻找那些不容易在末尾留下孤立节点，然后在所有其他行上都有 7 个项目的元素。理想情况下，我们有：

  • 3 至 7 列之间。
  • 最后一行的项目数必须与所有前一行相同，或者不少于maxRowCount - 2（因此，如果所有行都有 7 个，则最后一行只能有 5 个或 7 个，或者如果所有行都有 5 个，则最后一行只能有 3 个或 5 个，等等）。
  • 行项目有一个minWidth: 96px，并会增长以填充空间。一旦我们掌握了此工作原理的基本知识，我就可以弄清楚如何使事物具有响应性，但假设存在containerWidth。

所以在我的脑海里，假设我们有containerWidth === 700px。然后，，700/96 == 7+所以每行可能有 7 个。如果我们有 99 个项目（例如），那么99 % 7 == 1，所以7不会起作用，因为最后一行会有 1 个。6不会起作用，因为99是偶数，所以尝试5? 99 % 5 == 4，那不会起作用，因为4是偶数。所以尝试3，，99 % 3 == 0这样就可以按原样工作，使用它！

您将怎样实现这样的目标？

javascript

2 个回答

  1. 这样的事情似乎是正确的，但我是否正确解决了它？

    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

    这是一个反复测试列数是否符合您的条件的示例

    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

相关问题