同位素插件自动高度问题

Question

我一直在研究同位素过滤器插件，并且难以获得高度以保持内容的动态。当它变得更大 - 它没关系。但是当我从3行图像到1（例如）时，容器的高度立即改变，而不是动态的。我在谷歌到处搜索，尝试了一切，但不幸的是，问题仍然存在。我在github上发布了我的网站。您可以在此处查看代码的更多详细信息：https://marcell123.github.io/marcell2.github.io/ https://github.com/Marcell123/marcell2.github.io

但是我希望我的同位素过滤器插件像这样工作： http://veented.info/waxom/home-portfolio-rev-slider/

我的代码：

$(document).ready(function(){

  $('.grid').imagesLoaded( function() {
  		

			$('.portfolio-btn').on( 'click', 'button', function() {
		  var filterValue = $(this).attr('data-filter');
		  $grid.isotope({ filter: filterValue });
			});

					// init Isotope
			var $grid = $('.grid').isotope({

			itemSelector:'.grid-item',
			percentPosition: true,
			masonry: {
				columnWidth: '.grid-item'
				}
			})
		});

})

/*our latest project*/
section#our-latest-project {
	padding-top: 50px;
	text-align: center;
	h3 {
		font-family: 'Raleway', sans-serif;
		font-weight: 600;
		font-size: 30px;
		color: #555555;
		line-height: 1.2;
	}
	p {
		font-family: 'Montserrat', sans-serif;
		font-weight: 300;
		font-size: 16px;
  	color: #8c8c8c;
  	width: 760px;
  	margin: 0 auto;
  	line-height: 1.75;
	}
}


.portfolio-menu {
	button {
		display: inline-block;
		padding: 20px;
	}
}

.single-portfolio-item {
	img {
		margin-bottom: 30px;
	}
}

.grid-item {
	float: left;
}/*our latest project*/
section#our-latest-project {
	padding-top: 50px;
	text-align: center;
	h3 {
		font-family: 'Raleway', sans-serif;
		font-weight: 600;
		font-size: 30px;
		color: #555555;
		line-height: 1.2;
	}
	p {
		font-family: 'Montserrat', sans-serif;
		font-weight: 300;
		font-size: 16px;
  	color: #8c8c8c;
  	width: 760px;
  	margin: 0 auto;
  	line-height: 1.75;
	}
}


.portfolio-menu {
	button {
		display: inline-block;
		padding: 20px;
	}
}

.single-portfolio-item {
	img {
		margin-bottom: 30px;
	}
}

.grid-item {
	float: left;
}

<section id="our-latest-project">
			<div class="container">
				<div class="row">
					<div class="col-xs-12">
						<h3>Our Latest Projects.</h3>
						<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium.</p>
					</div>
				</div>

				<div class="row">
					<div class="col-xs-12">
						<div class="portfolio-menu">
							<div class="button-group portfolio-btn">
							  <button data-filter="*">show all</button>
							  <button data-filter=".cat1">metal</button>
							  <button data-filter=".cat2">transition</button>
							  <button data-filter=".cat3">alkali  alkaline-earth</button>
							  <button data-filter="cat4">not transition</button>
							  <button data-filter=".cat5">metal but not transition</button>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="grid">
						<div class="col-md-4 grid-item cat1">
							<div class="single-portfolio-item">
								<img src="images/phone.jpg" alt="phone" class="img-responsive">
							</div>
						</div>
						<div class="col-md-4 grid-item cat2 cat4">
							<div class="single-portfolio-item">
								<img src="images/phone.jpg" alt="phone" class="img-responsive">
							</div>
						</div>
						<div class="col-md-4 grid-item cat1 cat3">
							<div class="single-portfolio-item">
								<img src="images/phone.jpg" alt="phone" class="img-responsive">
							</div>
						</div>
						<div class="col-md-4 grid-item cat2 cat4">
							<div class="single-portfolio-item">
								<img src="images/open-book.jpg" alt="book-open" class="img-responsive">
							</div>
						</div>
						<div class="col-md-4 grid-item cat1">
							<div class="single-portfolio-item">
								<img src="images/phone.jpg" alt="phone" class="img-responsive">
							</div>
						</div>
						<div class="col-md-4 grid-item cat2 cat3">
							<div class="single-portfolio-item">
								<img src="images/bird.jpg" alt="bird" class="img-responsive">
							</div>
						</div>
						<div class="col-md-4 grid-item cat1 cat5">
							<div class="single-portfolio-item">
								<img src="images/mountain.jpg" alt="mountain" class="img-responsive">
							</div>
						</div>
						<div class="col-md-4 grid-item cat1 cat3">
							<div class="single-portfolio-item">
								<img src="images/scale.jpg" alt="scale" class="img-responsive">
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

Answer 1

好吧，经过我之前为解决这个问题而做出的许多无用的尝试，问题解决了。我刚刚添加了自己的内容。我想，那是因为高度是从窗口/文档计算的。因为那行$（document）.ready（function（）。 希望，这将有助于未来的人