fitRows在同位素砌體柱大小問題

Question

我有一個石工照片庫與fitRows佈局模式與一個小的JS配置，我已經購買了一個主題，我不得不修改它以支持固定300px圖像高度和任何寬度，就像谷歌圖片搜索。

問題是，每列有相同的寬度，而不是自動和圖像之間有空白。

這裏是完整的代碼示例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的寬度設置爲.item img。我不知道爲什麼你添加了所有你添加的額外腳本（涼亭）。 這裏是一個工作示例

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