javascript - 同位素 masonry 柱尺寸问题中的 fitRows

Question

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

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

这是完整的代码示例 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。我不确定您为什么要添加您添加的所有额外脚本 (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));