Isotope 벽돌 크기 문제의 fitRows

Question

필자는 테마로 구입 한 작은 JS 구성으로 fitRows 레이아웃 모드의 석조 사진 갤러리를 보유하고 있으며 고정 된 300px 이미지 높이와 너비를 지원하도록 수정해야했습니다. Google 이미지 검색.

각 열의 너비가 auto 대신에 동일하고 이미지 사이에 공백이있는 것이 문제입니다.

여기에 전체 코드 샘플 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

당신은 fitRows에 layoutMode를 설정하지에게 있습니다. 또한 여백 설정을 제거하고 .item이 아닌 .item의 너비를 설정합니다. 내가 추가 한 모든 스크립트를 왜 추가했는지 확신 할 수 없습니다. 여기 지금은 괜찮아 보이는 작업 예를

Codepen

CSS

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

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

자바 스크립트

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