砌体中心项目答案

【问题标题】：Masonry center items砌体中心项目
【发布时间】：2017-10-13 22:42:22
【问题描述】：

我正在尝试将 Masonry 网格内的项目居中。我已经阅读并尝试了很多关于将网格本身居中的相关帖子，但对这些项目没有任何作用。

到目前为止我已经尝试过：

添加/删除排水沟
添加/删除 fitwidth 选项
试图在容器上添加margin 0 auto
试图在容器上添加/删除宽度。

我创建了一个 sn-p 来表示问题

$(document).ready(function() {
  var $container = $(".grid");
  $container.masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 20,
    fitWidth: true,
  });
  $container.imagesLoaded(function() {
    $container.css({
      opacity: 0,
      visibility: "visible"
    }).animate({
      opacity: 1.0
    }, 300);
    //$container.show();
    $container.masonry('layout');
  });
});

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  width: 1260px;
  border: solid 2px red;
}

.grid {
  max-width: 1260px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  overflow: hidden;
  padding: 0 0 2em;
  visibility: hidden;
  background: rgba(0, 255, 0, .1);
}

.grid-item,
.grid-sizer {
  display: block;
  padding: 1.5em;
  margin: 0 0 1.5em;
  background: #fff;
  width: 23%;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<body>
  <main id="content" class="content" role="main">
    <div class="wrapper">
      <section class="grid">
        <div class="grid-sizer"></div>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>
      </section>
    </div>
  </main>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js">
  </script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js">
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      var $container = $(".grid");
      $container.masonry({
        // options
        itemSelector: '.grid-item',
        columnWidth: 400,
        fitWidth: true,
      });
      $container.imagesLoaded(function() {
        $container.css({
          opacity: 0,
          visibility: "visible"
        }).animate({
          opacity: 1.0
        }, 300);
        //$container.show();
        $container.masonry('layout');
      });
    });
  </script>
</body>

如您所见，在绿色部分的左侧有一个小绿地，但最后一个和右侧之间有很多空间。我怎样才能在那里拥有平等的空间？我很确定我遗漏了一些明显的东西，但我找不到什么。

【问题讨论】：

标签： jquery frontend jquery-masonry

【解决方案1】：

我终于设法通过删除容器上的百分比宽度来做到这一点。我已经尝试使用属性percentPosition: true，但它与文档所说的 fitWidth 不兼容：

fitWidth: true 不适用于具有百分比宽度的元素大小。 columnWidth 需要设置为固定大小，例如 columnWidth：120，或者项目需要具有固定大小（以像素为单位），例如 width：120px。否则，容器和项目的宽度将相互折叠。

这是一个工作代码示例：

$(document).ready(function() {
  var $container = $(".grid");
  $container.masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 20,
    fitWidth: true,
  });
  $container.imagesLoaded(function() {
    $container.css({
      opacity: 0,
      visibility: "visible"
    }).animate({
      opacity: 1.0
    }, 300);
    //$container.show();
    $container.masonry('layout');
  });
});

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  width: 1260px;
  border: solid 2px red;
}

.grid {
  /*max-width: 1260px;
  width: 100%;
  */
  margin: 0 auto;
  border: 1px solid #f2f2f2;
  overflow: hidden;
  padding: 0 20px 2em;
  visibility: hidden;
  background: rgba(0, 255, 0, .1);
}

.grid-item,
.grid-sizer {
  display: block;
  padding: 1.5em;
  margin: 0 0 1.5em;
  background: #fff;
  width: 300px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<body>
  <main id="content" class="content" role="main">
    <div class="wrapper">
      <section class="grid">
        <div class="grid-sizer"></div>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>hey there how ya doin' today ?
          </p>
        </article>

        <article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
          <p>Hello world !</p>
        </article>
      </section>
    </div>
  </main>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js">
  </script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js">
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      var $container = $(".grid");
      $container.masonry({
        // options
        itemSelector: '.grid-item',
        columnWidth: 400,
        fitWidth: true,
      });
      $container.imagesLoaded(function() {
        $container.css({
          opacity: 0,
          visibility: "visible"
        }).animate({
          opacity: 1.0
        }, 300);
        //$container.show();
        $container.masonry('layout');
      });
    });
  </script>
</body>

【讨论】：