jquery同位素空格

Question

我目前正在试验 jquery isotope，但在排序项目的方式上遇到了问题。

我想最好通过向您展示我当前的脚本here来解释。

当您单击第二个框时，它会变宽并变为绿色。那很好，但是现在在第一个盒子之后的第一行有很大的差距。我想做的是用其他两个较小的盒子（最好是 3 和 4）填充那个空白空间。

是否有某种技巧可以强制它填充所有空白？如果有人可以将其推向正确的方向，我将不胜感激。 :-)

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

 $container.isotope({
  itemSelector: '.item',
  layoutMode : 'fitRows',
 masonry: {
    columnWidth: 30
  },
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
      // trigger layout and sort
      .isotope();
  });
});

Answer 1

对于您的目的，这是错误的布局模式。如果您使用 masonryHorizo​​ntal 并增加容器的高度，它看起来会更好！我还删除了 getSortData，因为它似乎没有必要。

看看：http://jsfiddle.net/D87X8/5/

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

    $container.isotope({
        itemSelector: '.item',
        layoutMode: 'masonryHorizontal',
        masonry: {
            columnWidth: 30
        },
        resizesContainer: true
    });


    $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
        // trigger layout and sort
            .isotope();
    });
});