fitRows в вопросе размера колонки из изотопной кладки

Question

У меня есть фотокамера с маской с режимом макета с маской JS, которую я купил с темой, и мне пришлось ее модифицировать, чтобы поддерживать фиксированную высоту изображения 300 пикселей и любую ширину, поиск изображений Google.

проблема заключается в том, что каждый столбец имеет одинаковую ширину вместо автоматического и между изображениями есть пробелы.

Вот полный пример кода http://codepen.io/evox/pen/CaKpD

\t (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 { 
 
\t \t overflow:hidden;   
 
\t \t margin:30px 0; 
 
\t } 
 
\t .masonry_wrapper .item { 
 
\t \t margin: 0 2px 4px;       
 
    float: left; 
 
\t \t padding:0; 
 
\t } 
 
\t .masonry_wrapper .item img { 
 
\t \t width:auto; 
 
\t \t height: 300px; 
 
\t \t position: relative; 
 
\t \t z-index: -2; 
 
\t }

<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

Вы никогда не установите LayoutMode в fitRows. Я также удалил настройки полей и установил ширину .item not .item img. Я не уверен, почему вы добавили все дополнительные скрипты, которые вы добавили (bower). Вот рабочий пример

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));