5

I am using isotope filter with infinite scroll plug-in in same page, so that here at the same time both are not working perfectly, some design issues reflecting with isotope jQuery file. When I click more button in scroll, it gets some more post well, but not placed correctly. It takes behind to older post. I couldn't find out the solution still now. If anyone have same problem and found any idea with this means, please feel free to reply for my question.

This is my jQuery function of isotope filter

$(function(){

    // Orginal function by Alien51
    var $container = $('#container');
    $container.isotope({
    masonry: {
      columnWidth: 80
    },
    sortBy: 'number',
    getSortData: {
      number: function( $elem ) {
        var number = $elem.hasClass('element') ? 
          $elem.find('.number').text() :
          $elem.attr('data-number');
        return parseInt( number, 10 );
      },
      alphabetical: function( $elem ) {
        var name = $elem.find('.name'),
            itemText = name.length ? name : $elem;
        return itemText.text();
      }
    }
  });
        var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

  $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');
    // make option object dynamically, i.e. { filter: '.my-filter-class' }
   var myArray = [];
    var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');

            if($('#arrays').val()=="")
                comm = "";
            else
                comm =  ',';

            myArray = $('#arrays').val()+comm+'.'+value;
            alert(myArray);
            //myArray = substring(1, myArray.length);

            if(value!='Show All')
                $('#arrays').val(myArray);
            else
                $('#arrays').val('Show All');

        if(value=='Show All')
            value = '*';
        else
            value = $('#arrays').val();
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[ key ] = value;
    //alert(key);
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
      // changes in layout modes need extra logic
      changeLayoutMode( $this, options )
    } else {
      // otherwise, apply new options
      $container.isotope( options );
    }
          return false;
  });
    // dynamically load sites using Isotope from Zootool
    //var ajaxError='';
    //alert(ajaxError);
  $.getJSON('http://zootool.com/api/users/items/?username=desandro' +
      '&apikey=8b604e5d4841c2cd976241dd90d319d7' +
      '&tag=bestofisotope&callback=?')
      .error( ajaxError )
      .success(function( data )
      {
      // proceed only if we have data
      if ( !data || !data.length ) {
        ajaxError();
        return;
      }
      var items = [],
          item, datum;

      for ( var i=0, len = data.length; i < len; i++ ) {
        datum = data[i];
        item = '<li><a href="' + datum.url + '">'
          + '<img src="' + datum.image.replace('/l.', '/m.') + '" />'
          + '<b>' + datum.title + '</b>'
          + '</a></li>';
        items.push( item );
      }
            var $items = $( items.join('') )
        .addClass('example');
                // set random number for each item
      $items.each(function(){
        $(this).attr('data-number', ~~( Math.random() * 100 + 15 ));
      });
            $items.imagesLoaded(function(){
        $sitesTitle.removeClass('loading').text('Sites using Isotope');
        $container.append( $items );
        $items.each(function(){
          var $this = $(this),
              itemHeight = Math.ceil( $this.height() / 20 ) * 120 - 10;
          $this.height( itemHeight );
        });
        $container.isotope( 'insert', $items );
      });
          });
    });

    $("#infscr-loading a").click( function(){
        alert('njasd');
        var h = $("#container").height();
        //alert(h);
        $("#container").css("min-height",h);
        $("#container").addClass("aft_fst");
    });

Thanks in advance for your help.

Bharathi
  • 539
  • 2
  • 6
  • 18
  • I think that you need to re-apply the layout before the new elements are loaded, something like you do with the `$items.imagesLoaded` function. In the [appendix of isotope](http://isotope.metafizzy.co/appendix.html#imagesloaded) say something like this: Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue. imagesLoaded works by triggering a callback after all child images have been loaded. – Kangcor Feb 05 '15 at 15:19

0 Answers0