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

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 不可能做到这一点。原因是砖石并不能真正与“行”一起工作——它只是试图将你的 block 放入自由空间中。因此，虽然您在示例中使用的特定宽度看起来有两行，但如果稍微更改宽度，您会得到以下结果:

如果您尝试将最后一个 block “居中”，则意味着您没有将这些 block 放入尽可能小的空间中。

这通常会看起来很奇怪，并且违背了 masonry 的目的。如果您更喜欢均匀分布的行，而不是填充间隙，则可以使用普通的居中 inline:block; 元素来代替。