Question

大家好，我希望你做得很好。我正在使用Isotope，下面你可以看到我写的JavaScript。如果它们是同位素元素，我发现不可能将li元素居中。要通过居中查看我的意思，请参阅下面的图片。我已经设法将整个同位素集中到屏幕上，但我也需要将元素置于中心位置而不是浮动到左侧。

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

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

Isotope运行良好，没有任何问题（到目前为止）。 这是我目前的布局：

这是理想的布局。

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

jQuery isotope centering

Answer 1

如果您不关心支持旧浏览器（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;
}`

Answer 2

您可能需要添加一些额外的标记，并增加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将.box es放在li项目中。

如果你不知道有多少“流浪”，这会变得棘手。您最终会拥有的项目 - 您可能需要使用javascript来解决此问题，附加一个类（例如.span-2, .span-3, .span-6

同位素中的中心元素

2 个答案: