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

Question

我有一个砖石网格，有时最后一行少于4个项目。我希望最后一行在我的容器中间居中。最后一行中的项目数可能会有所不同，具体取决于我的页面响应能力，这就是为什么我无法使用CSS来识别最后一行项目。

如果有人有解决方案，请帮忙。 https://jsfiddle.net/oaoLuh4f/

＆＃13;

＆＃13;

$('.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,
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我不相信这是可能的砌体。原因是砌体并不能真正与“行”一起使用 - 它只是试图让你的积木适应自由空间。因此，虽然您在示例中使用的特定宽度使得看起来有两行，但如果稍微更改宽度，则会得到以下内容：

如果您试图将最后一个区域“居中”，那就意味着您不会将这些碎片装入尽可能小的空间。

这往往看起来很奇怪，而且它违背了砌体的目的。如果您更喜欢均匀分布的行，而不是填补空白，则可以改为使用普通的居中inline:block;元素。