Jquery Isotope Not Working

Question

This is the Problem I am facing - it occurs sometimes only: and this is my output image:

i need ouput same as the Pintrest style .

Code:

$(document).ready(function(){
        var $container = $('#content');
$container.isotope({
    filter: '*',
    //layoutMode : '',
        animationOptions: {
     duration: 750,
     easing: 'linear',
     queue: false,

   }



});

$('#nav a').click(function(){
  var selector = $(this).attr('data-filter');
    $container.isotope({ 
    filter: selector,
    animationOptions: {
     duration: 750,
     easing: 'linear',
     queue: false,

   }
  });
  return false;
});

});

SOLVED: Problem Solved :)

Answer 1

I've tested on your website and this is your answer:

$('#content').isotope({
  itemSelector:'.isotope-item',
  layoutMode: 'fitRows'
});

Change the layoutMode to other values available here: http://isotope.metafizzy.co/docs/layout-modes.html

Also your header JS should look like this:

<script type="text/javascript">
$( document ).ready( function() { // Here you listen for the document ready event, when html, css, js are ready
  $( '#part1' ).load("home/" , function(){ $('#loading').remove();});
});
//hide frame on resizing the window
$(window).bind('resize load', function(){ // here you listen for resize and load of images, iframes and others
  if ($(window).width() < 1349) {
    $('#frame').hide();
    $('#right').css('width' , '85%');
  }
  else {
    $('#frame').show();
    $('#right').css('width' , '72%');
  }
});
</script>