fitRows в проблеме с размером столбца каменной кладки Isotope

У меня есть каменная фотогалерея с режимом макета fitRows с небольшой конфигурацией JS, которую я приобрел вместе с темой, и мне пришлось изменить ее, чтобы она поддерживала фиксированную высоту изображения 300 пикселей и любую ширину, как поиск изображений Google.

проблема в том, что каждый столбец имеет одинаковую ширину, а не авто, и между изображениями есть пробелы.

вот полный пример кода 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>


javascript html jquery css masonry
person Mario M    schedule 20.09.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы никогда не устанавливали для 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));
person Macsupport    schedule 20.09.2014
comment
спасибо теперь выглядит нормально! У меня есть код из купленной темы, там было гораздо больше кода javascript, который я удалил, чтобы упростить его для своих нужд. - person Mario M; 21.09.2014