CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
Anton Korzhuk
Anton Korzhuk

Reputation: 23

jQuery Plugin Isotope not rearranging items properly

I'm using Isotope in one of my projects and for some strange reason I cannot get it to work like the demo (click on element #26 Iron and you'll notice how #30 Zinc moves up to fill in the empty space the large block would have left).

Here's a jsfiddle of where im at. Notice when you click Category 2, there are two black spaces where category 3 and 4 should be.

Here is my isotope js: 

$(document).ready(function() {
  var $iContainer = $('#ls-container');

  $iContainer.isotope({
    itemSelector : '.ls-item',
    layoutMode : 'masonry',
    masonry : {
      columnWidth : 170
    }
  });

  $iContainer.delegate( '.ls-item', 'click', function() {
    $(this).addClass('large-item').siblings().removeClass('large-item');
    $iContainer.isotope('reLayout');

  });

});​

Upvotes: 1

Views: 1515

Answers (1)

desandro
desandro

Reputation: 2894

The gap you are seeing is just how the Masonry layout algorithm works. See Masonry issue #141.

But we can hack this by using sorting. See this fiddle. The technique is similar to this article

$iContainer.isotope({
  itemSelector : '.ls-item',
  layoutMode : 'masonry',
  masonry : {
    columnWidth : 170
  },
  getSortData: {
    largeFirst: function( $elem ) {
      var isLarge = $elem.hasClass('large-item');
      var index = $elem.index();
      return isLarge ? index - index % 3 - 0.5: index;
    }
  }
});

$iContainer.delegate( '.ls-item', 'click', function() {
  $(this).addClass('large-item').siblings().removeClass('large-item');
  // update sortData for all items
  $iContainer.isotope( 'updateSortData', $iItem )
        .isotope({ sortBy: 'largeFirst' });

});

Upvotes: 3

Related Questions