同位素:具有灵活列宽的画廊在特定情况下不起作用

Question

我试图将同位素库放在一个宽度灵活的列中。

不幸的是，只有当我更改浏览器的窗口大小时，它才有效。

这是我的代码：

// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress(function() {
$grid.isotope('layout');
});

// Toggle Functions
$("#one_link").click(function() {
$("#categories").toggle();
$("#text_three").hide();
$("#cats_gallery").hide();
$("#text_two").hide();
});
$("#cats_link").click(function() {
$("#cats_gallery").toggle();
$("#text_two").hide();
$("#text_three").hide();
});
$("#two_link").click(function() {
$("#text_two").toggle();
$("#categories").hide();
$("#cats_gallery").hide();
$("#text_three").hide();
});
$("#three_link").click(function() {
$("#text_three").toggle();
$("#categories").hide();
$("#cats_gallery").hide();
$("#text_two").hide();
});

* {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 30px;
line-height: 100%;
cursor: default;
font-family: Arial;
}
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.content {
display: flex;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.column {
border-right: 1px solid;
}
.column_content {
overflow-y: scroll;
width: 100%;
height: 100%;
padding: 20px;
}
.column {
display: none;
}
.column:first-child {
display: block;
}
li:hover {
cursor: pointer;
}



#cats_gallery {
width: 100%;
height: 100%;
}

.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 33.333%;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://npmcdn.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<div class="content">
<div class="column">
<div class="column_content">
<ul>
<li id="one_link">One</li>
<li id="two_link">Two</li>
<li id="three_link">Three</li>
</ul>
</div>
</div>
<div id="categories" class="column">
<div class="column_content">
<ul>
<li id="cats_link">Cats</li>
</ul>
</div>
</div>
<div class="column" id="cats_gallery">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
</div>
</div>
</div>
<div class="column" id="text_two">
<div class="column_content">
<p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the smallest and only even prime number. Because it forms the basis of a duality, it has religious and spiritual significance in many cultures.</p>
</div>
</div>
<div class="column" id="text_three">
<div class="column_content">
<p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is the smallest odd prime number. It has religious or cultural significance in many societies.</p>
</div>
</div>
</div>

画廊隐藏在《一只猫》中。

我在不同的加载事件中尝试过，但都没有成功。

如果有人能帮助我，我会非常高兴的！

Answer 1

当#cats_gallery的可见性被切换时，可用的垂直空间将通过同位素重新计算。这是由于masonry布局模式。为了解决您遇到的问题，您应该在可见性更改后触发layout。

在你的代码上，你需要更改这个：

$("#cats_link").click(function() {
$("#cats_gallery").toggle();
$("#text_two").hide();
$("#text_three").hide();
});

这个：

$("#cats_link").click(function() {
$("#cats_gallery").toggle(function () {
$grid.isotope('layout');
});
$("#text_two").hide();
$("#text_three").hide();
});

要删除转换，请将transitionDuration属性设置为零(0(:

// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
},
transitionDuration: 0
});

此外，将切换持续时间设置为0。更新此行(注意回调函数前的0参数(：

$("#cats_gallery").toggle(0, function () {
$grid.isotope('layout');
});