fitRows在同位素砌体柱尺寸问题中的应用

Question

我有一个砖石图片库与fitRows布局模式与一个小的JS配置，我购买了一个主题，我不得不修改它，以支持固定的300 it图像高度和任何宽度，就像谷歌图像搜索。

问题是，每个列都有相同的宽度，而不是auto，图像之间有空白。

下面是完整的代码示例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的宽度。我不知道为什么您添加了所有额外的脚本(保龄球)。下面是一个有用的例子

科德芬

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