fitRows在Isotope砌体柱尺寸问题上

Question

我有一个带有fitRows布局模式的砌体照片库和一个我用主题购买的小JS配置，我不得不修改它以支持固定的300px图像高度和任何宽度，就像谷歌图像搜索一样。

问题是每列的宽度相同而不是自动，图像之间有空白区域。

这是完整的代码示例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

您永远不会将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));