同位素中的元素居中

Question

大家好，希望你们一切都好。我正在使用 Isotope，您可以在下面看到我编写的 JavaScript。如果li 元素是同位素元素，我发现它们不可能居中。要了解我所说的居中是什么意思，请看下面的图片。我已经设法将整个 Isotope 置于屏幕的中心，但我也需要将元素置于中心，而不仅仅是浮动到左侧。

让我们从我的脚本代码开始：

<script>
 $(document).ready(function(e) {
    $(".ullist li").addClass('element-item');
});

</script> 
<script>
$(document).ready(function(e) {
// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  //layoutMode: 'fitRows',
});
//$('.grid').isotope({ layoutMode : 'fitRows' });
// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};

// bind filter button click
$('#filters').on( 'click', 'a', function() {
  var filterValue = $( this ).attr('data-filter');
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.secmenu ul a').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'a', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});});
</script> 
<script>
$(function(){

  var $container = $('.grid'),
      $body = $('body'),
      colW = 20,
      columns = null;

  $container.isotope({
    // disable window resizing
    resizable: true,
    masonry: {
      columnWidth: colW,
        isFitWidth: true
    }
  });

  $(window).smartresize(function(){
    // check if columns has changed
    var currentColumns = Math.floor( ( $body.width() -10 ) / colW );
    if ( currentColumns !== columns ) {
      // set new column count
      columns = currentColumns;
      // apply width to container manually, then trigger relayout
      $container.width( columns * colW )
        .isotope('reLayout');
    }

  }).smartresize(); // trigger resize to set container width

});
</script>

基本 HTML 结构：

    <ul class="ullist grid">
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
      </ul>

同位素工作得很好，没有任何问题（到目前为止）。 这是我目前的布局：

这是想要的布局。

我什至在这里查看并尝试使用 David DeSandro 的存储库，但没有成功。那么请大家帮我实现上面的布局吗？ 谢谢大家。

jQuery isotope centering

Answer 1

您可能需要添加一些额外的标记并增加 Isotope 适合项目的列数。

<ul class="ullist grid">
  <li><span class="box">...</span></li>
  <li><span class="box">...</span></li>
  <li><span class="box">...</span></li>
  <li><span class="box">...</span></li>
</ul>

然后将列数设置为可被 2 和 3 整除的值。如果创建 6，则可以让前 6 个 li 项目跨越两列，最后两个跨越 3：

然后，使用 CSS 将您的 .boxes 定位在 li 项目中。

如果您不知道最后会有多少“杂散”项目，这会变得很棘手 - 您可能需要使用 javascript 来解决这个问题，附加一个类（例如 .span-2, .span-3, .span-6

Answer 2

如果您不关心支持旧浏览器（IE8 以下），最好的解决方案是使用 flex-box。检查此笔以获取 flex-box 解决方案codepen Link。

ul {
  width: 600px;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
li {
  width: calc((100% / 3) - 60px);
  height: 200px;
  background-color: #d91c5c;
  margin: 30px;
}`