Question

我目前正在尝试使用jquery同位素，但是对它的排序方式有困难。

我想最好通过向您展示我当前的脚本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

这是错误的布局模式。如果你使用masonryHorizontal并增加容器的高度它看起来好多了！我也删除了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();
    });
});

jquery同位素空格

1 个答案: