javascript - jQuery Isotope 在 fitColumns 布局模式下不对齐大宽度元素

Question

我正在使用 Jquery 同位素

我有一个元素宽度大于其他 div。所有元素都对齐良好，但元素在大宽度元素下未正确对齐。

http://jsfiddle.net/S5vAG/1381/

<div id="container">
  <div class="item">1</div>
  <div class="item large">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

$(function(){
  var $container = $('#container'),
      $items = $('.item');

  $container.isotope({
    itemSelector: '.item',
    layoutMode : 'fitColumns',
    resizesContainer : true,
    getSortData : {
      fitOrder : function( $item ) {
        var order,
            index = $item.index();

        if ( $item.hasClass('large') && index % 2 ) {
          order = index + 1.5;
        } else {
          order = index;
        }
        return order;
      }
    },
    sortBy : 'fitOrder'
  });

  $items.click(function(){
    var $this = $(this);
    // nothing to change if this already has large class
    if ( $this.hasClass('large') ) {
      return;
    }
    var $previousLargeItem = $items.filter('.large');

    $previousLargeItem.removeClass('large');
    $this.addClass('large');
    $container
      // update sort data on changed items
      .isotope('updateSortData', $this )
      .isotope('updateSortData', $previousLargeItem )
      // trigger layout and sort
      .isotope();
  });
});

谁能解释一下为什么会这样，或者请给我一个更好的解决方案。

Answer 1

基本上，它之所以如此，是因为 fitColumns 选项所做的；无论所排列元素的大小如何，这些元素都排列在垂直列中。

要更好地了解可用的布局选项以及它们在不同尺寸的元素中的外观，请查看此 Working Example .

听起来您可能想尝试 layoutMode: 'masonryHorizo​​ntal'。

Working Example using masonryHorizontal

$(function(){
  var $container = $('#container'),
      $items = $('.item');

  $container.isotope({
    itemSelector: '.item',
    layoutMode : 'masonryHorizontal',   // Important Bit
    resizesContainer : true,
    getSortData : {
      fitOrder : function( $item ) {
        var order,
            index = $item.index();

        if ( $item.hasClass('large') && index % 2 ) {
          order = index + 1.5;
        } else {
          order = index;
        }
        return order;
      }
    },
    sortBy : 'fitOrder'
  });

  $items.click(function(){
    var $this = $(this);
    // nothing to change if this already has large class
    if ( $this.hasClass('large') ) {
      return;
    }
    var $previousLargeItem = $items.filter('.large');

    $previousLargeItem.removeClass('large');
    $this.addClass('large');
    $container
      // update sort data on changed items
      .isotope('updateSortData', $this )
      .isotope('updateSortData', $previousLargeItem )
      // trigger layout and sort
      .isotope();
  });
});

请注意，在示例中，我更改了 .items.large 的宽度，使其看起来均匀。