同位素中的元素居中

Posted 2023-03-05

【中文标题】同位素中的元素居中

【英文标题】：Centering elements in isotope

【发布时间】：2016-12-03 20:44:45

【问题描述】：

大家好，希望你们一切都好。我正在使用 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

【参考方案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

【参考方案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;
`

【讨论】：

是的，但这样我将无法使用同位素给我的动画效果和过滤。我想用同位素代码实现这个布局。

仅供参考：即使在 IE9 中也不支持 flex，并且您不需要编写 flex-direction: row 因为它是默认值。另一个：最常见的错误方式是给弹性项目一个宽度而不是弹性基础。