fitRows in Isotope masonry column size issue

Question

I have a masonry photo gallery with fitRows layout mode with a small JS config which I have purchased with a theme and I had to modify it to support fixed 300px image height and any width, just like google image search.

the problem is that each column have the same width instead of auto and there are white spaces between images.

here is the complete code sample http://codepen.io/evox/pen/CaKpD

	(function ($) {
        var $container = $('.masonry_wrapper')
                        
            function refreshWaypoints() {
                setTimeout(function() {
                }, 1000);   
            }
                        
            $('nav.portfolio-filter ul a').on('click', function() {
                var selector = $(this).attr('data-filter');
                $container.isotope({ filter: selector }, refreshWaypoints());
                $('nav.portfolio-filter ul a').removeClass('active');
                $(this).addClass('active');
                return false;
            });
                
            function setPortfolio() { 
                setColumns();
                $container.isotope('fitRows');
            }
    
            isotope = function () {
                $container.isotope({
                    resizable: true,
                    itemSelector: '.item'
                });
            };
        isotope();
        $(window).smartresize(isotope);
    }(jQuery));

.masonry_wrapper {
		overflow:hidden;        
		margin:30px 0;
	}
	.masonry_wrapper .item {
		margin: 0 2px 4px;                        
     float: left;
		padding:0;
	}
	.masonry_wrapper .item img {
		width:auto;
		height: 300px;
		position: relative;
		z-index: -2;
	}

<h1>Isotope - fitRows layout mode</h1>

<div class="masonry_wrapper">
  <div class="item">
     <img src="http://www.photohdx.com/images/2014/09/tmb/green-psychedelic-blurry-background.jpg" alt="Green Psychedelic Blurry Background">
  </div>
  <div class="item">
    <img src="http://www.photohdx.com/images/2014/09/tmb/dark-castle-stone-wall-texture.jpg" alt="Dark Castle Stone Wall Texture">
  </div>
  <div class="item">
     <img src="http://www.photohdx.com/images/2014/09/tmb/green-psychedelic-blurry-background.jpg" alt="Green Psychedelic Blurry Background">
  </div>
  <div class="item">
    <img src="http://www.photohdx.com/images/2014/09/tmb/dark-castle-stone-wall-texture.jpg" alt="Dark Castle Stone Wall Texture">
  </div>
   <div class="item">
    <img src="http://www.photohdx.com/images/2014/09/tmb/dark-castle-stone-wall-texture.jpg" alt="Dark Castle Stone Wall Texture">
  </div>
  <div class="item">
     <img src="http://www.photohdx.com/images/2014/09/tmb/green-psychedelic-blurry-background.jpg" alt="Green Psychedelic Blurry Background">
  </div>
  <div class="item">
    <img src="http://www.photohdx.com/images/2014/08/tmb/autumn-tree-trunk-background.jpg" alt="Autumn Tree Trunk Background">
  </div>
  <div class="item">
    <img src="http://www.photohdx.com/images/2014/09/tmb/dark-castle-stone-wall-texture.jpg" alt="Dark Castle Stone Wall Texture">
  </div>
  <div class="item">
     <img src="http://www.photohdx.com/images/2014/09/tmb/green-psychedelic-blurry-background.jpg" alt="Green Psychedelic Blurry Background">
  </div>
  <div class="item">
    <img src="http://www.photohdx.com/images/2014/08/tmb/autumn-tree-trunk-background.jpg" alt="Autumn Tree Trunk Background">
  </div>
</div>

Answer 1

You never set your layoutMode to fitRows. I also removed your margin settings and set the width of the .item not .item img. I'm not sure why you added all the extra scripts you added (bower). Here is a working example

Codepen

CSS

.masonry_wrapper {
    overflow:hidden;        
    margin:0px 0;
}

.masonry_wrapper .item {
  margin: 0;                        
 float: left;
    padding:0;
    width:auto;
    height: 300px;
}

Javascript

(function ($) {
     var $container = $('.masonry_wrapper');

        function refreshWaypoints() {
            setTimeout(function() {
            }, 1000);   
        }

        $('nav.portfolio-filter ul a').on('click', function() {
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector }, refreshWaypoints());
            $('nav.portfolio-filter ul a').removeClass('active');
            $(this).addClass('active');
            return false;
        });
          $container.isotope({
                resizable: false,
                itemSelector: '.item',
              layoutMode: 'fitRows'
            });  

    $container.isotope('bindResize')
    }(jQuery));