前端-如何始终平均分配剩余空间

如何在布局中始终平均分配剩余空间给间隙(gap)

不废话,直接上代码:

import { useEffect } from "react";
import "./styles.css";

export default function App() {
  function dynamicCalculate() {
    const container = document.getElementById("container") as HTMLElement;
    const item = container.firstElementChild as HTMLElement;

    let W: number; // Width of container.
    let w: number; // Width of item.
    let b: number; // Border's width of item.
    let minGap: number; // Minimum gap between items.
    let gap: number; // Gap between items.
    let n: number; // Number of items in one row.

    W = container.clientWidth;
    w = item.clientWidth;
    b = +window.getComputedStyle(item).borderWidth.replace("px", "") * 2;
    w = w + b;
    minGap = 16;
    n = Math.floor(W / w);

    function calc(n: number): [number, number] {
      gap = (W - n * w) / (n + 1);
      if (gap < minGap) {
        n--;
        gap = (W - n * w) / (n + 1);
        return calc(n);
      }
      return [n, gap];
    }
    [n, gap] = calc(n);
    console.log(`Put ${n} items in one row, gap is ${gap}px.`);
    const halfGap = gap / 2;
    container.style.paddingLeft = `${halfGap}px`;
    container.style.paddingRight = `${halfGap}px`;
    for (let item of container.children) {
      (item as HTMLElement).style.marginLeft = `${halfGap}px`;
      (item as HTMLElement).style.marginRight = `${halfGap}px`;
    }
  }

  useEffect(() => {
    dynamicCalculate();
    window.addEventListener("resize", dynamicCalculate);
    return () => {
      window.removeEventListener("resize", dynamicCalculate);
    };
  }, []);

  return (
    

Hello CodeSandbox

Start editing to see some magic happen!

{/* demo */}
{Array.from({ length: 20 }).map((v, i) => { return (
Item-{i}
); })}
); }

codesandbox地址demo在线预览

你可能感兴趣的