最后一行可以使用同位素或砖石居中吗？

Question

我有一个砖石网格，有时最后一行少于 4 个项目。我希望最后一行在我的容器中间居中。最后一行的项目数可能会根据我的页面的响应能力而变化，这就是为什么我不能使用 CSS 来标识最后一行的项目。

如果有人有解决办法请帮忙。 https://jsfiddle.net/oaoLuh4f/

$('.masonry').masonry({
  itemSelector: '.masonry-brick',
  isFitWidth: true,
  animationOptions: {
    duration: 400
  }
});
$('.masonry').isotope({
  itemSelector: '.masonry-brick',
  layoutMode: 'fitRows',
});


$.each($(".masonry-brick"), function() {
  var blockHeight = $(this).outerHeight();
  $(this).css({
    "height": blockHeight
  });
});
$.each($('.masonry'), function() {
  var masonryWrapperWidth = $(this).outerWidth();
  $('.masonry').css({
    "width": masonryWrapperWidth,
  });
});

.masonry {
  margin: auto;
}
.masonry-brick {
  width: 150px;
  margin: 5px;
  color: #262524;
 }

<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="masonry">
  <div class="masonry-brick">
    <img src="http://placehold.it/150x150" alt="" />
  </div>
  <div class="masonry-brick">
    <img src="http://placehold.it/150x200" alt="" />
  </div>
  <div class="masonry-brick">
    <img src="http://placehold.it/150x250" alt="" />
  </div>
  <div class="masonry-brick">
    <img src="http://placehold.it/150x100" alt="" />
  </div>
  <div class="masonry-brick">
    <img src="http://placehold.it/150x200" alt="" />
  </div>
  <div class="masonry-brick">
    <img src="http://placehold.it/150x250" alt="" />
  </div>
  <div class="masonry-brick">
    <img src="http://placehold.it/150x150" alt="" />
  </div>

  <div class="masonry-brick">
    <img src="http://placehold.it/150x250" alt="" />
  </div>
</div>

Answer 1

我认为 Masonry 不可能做到这一点。原因是 masonry 并不能真正与 "Rows" 一起工作——它只是试图将你的块放入空闲的 spaces 中。因此，虽然您在示例中使用的特定宽度使它看起来有两行，但如果您稍微更改宽度，则会得到以下结果：

如果您尝试 "center" 最后一个块，这将意味着您没有将这些块放入尽可能小的 space 中。

这通常看起来很奇怪，而且有悖于砌体的目的。如果您更喜欢 evenly-distributed 行，而不是填充空白，您可以使用普通的居中 inline:block; 元素。

最后一行可以使用同位素或砖石居中吗？

Can the last row be center using isotope or masonry?

jquery

jquery-masonry

masonry

jquery-isotope