如何实现Masonry布局100%占满分配区域（类似Flexbox的space-between效果）

嘿，我完全懂你想要的效果——让Masonry布局的左右两端紧紧贴合容器边界，就像Flexbox里justify-content: space-between那样，而不是让整个网格居中留白。Masonry默认的固定列宽+间隙配置确实做不到这点，但我们可以通过动态计算间隙或项目宽度来实现，下面给你两种可行的方案：

方案一：动态计算水平间隙（保留固定项目宽度） #

这个思路是保持项目宽度不变，把容器剩余的空间平均分配到项目之间的水平间隙里，这样左右两端就不会有空隙。

修改后的完整代码： #

<div class="frame">
  <div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</div>

<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; margin: 0; }

.frame {
  width: 90%;
  background: blue;
  padding: 20px 0;
  margin: 0 auto;
}

.grid {
  width: 100%;
  padding: 0;
}

.grid-item {
  width: 160px;
  height: 120px;
  background: #D26;
  margin-bottom: 10px;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<script>
$(document).ready(function() {
  const $grid = $('.grid');
  const baseItemWidth = 160; // 你想要的固定项目宽度
  const minGutter = 20; // 最低可接受的间隙大小，避免间隙过小

  // 初始化布局
  function updateMasonryLayout() {
    const containerWidth = $grid.width();
    // 计算每行能容纳的项目数量（基于基础宽度+最小间隙）
    let columns = Math.floor(containerWidth / (baseItemWidth + minGutter));
    columns = columns < 1 ? 1 : columns; // 保证至少1列

    // 计算总剩余空间，平均分配到项目间隙（间隙数=列数-1）
    const totalExtraSpace = containerWidth - (columns * baseItemWidth);
    const calculatedGutter = columns > 1 ? totalExtraSpace / (columns - 1) : 0;

    // 更新Masonry配置并重新布局
    $grid.masonry('option', {
      itemSelector: '.grid-item',
      columnWidth: baseItemWidth,
      gutter: calculatedGutter,
      isFitWidth: false
    }).masonry('layout');
  }

  // 首次初始化
  $grid.masonry();
  updateMasonryLayout();

  // 监听窗口 resize，实时更新布局
  $(window).resize(function() {
    updateMasonryLayout();
  });
});
</script>

原理说明： #

1. 先获取容器的实际宽度，结合你设定的固定项目宽度和最小间隙，计算出每行能放多少个项目。
2. 算出容器剩余的空间，把这些空间平均分给项目之间的水平间隙——这样左右两端没有额外间隙，项目自然贴紧容器边界。
3. 加上窗口resize监听，保证窗口大小变化时布局能自动适配。

方案二：固定间隙，动态调整项目宽度 #

如果你更想保持间隙大小固定，也可以反过来计算项目宽度，让项目宽度+固定间隙刚好填满容器宽度：

核心JS代码修改： #

$(document).ready(function() {
  const $grid = $('.grid');
  const fixedGutter = 20; // 固定间隙大小
  const baseMinWidth = 140; // 项目最小宽度，避免过窄

  function updateMasonryLayout() {
    const containerWidth = $grid.width();
    // 计算最多能放多少列
    let columns = Math.floor((containerWidth + fixedGutter) / (baseMinWidth + fixedGutter));
    columns = columns < 1 ? 1 : columns;

    // 计算每个项目的宽度
    const itemWidth = (containerWidth - (columns - 1)*fixedGutter) / columns;
    // 给所有项目设置新宽度
    $('.grid-item').width(itemWidth);

    // 更新Masonry布局
    $grid.masonry('option', {
      itemSelector: '.grid-item',
      columnWidth: itemWidth,
      gutter: fixedGutter,
      isFitWidth: false
    }).masonry('layout');
  }

  $grid.masonry();
  updateMasonryLayout();

  $(window).resize(updateMasonryLayout);
});

这个方案的好处是间隙大小始终一致，项目宽度会根据容器宽度自适应调整，同样能实现左右贴边的效果。

两种方案都能满足你的需求，你可以根据自己的设计偏好选择其中一种~

内容的提问来源于stack exchange，提问作者BB23