Javascript 同位素：具有灵活列宽的图库在特定情况下不起作用

我试着把同位素画廊放在一个宽度灵活的柱子里

不幸的是，只有更改浏览器的窗口大小，它才能工作

这是我的密码：

//初始同位素
变量$grid=$（'.grid'）。同位素({
itemSelector:“.grid项”，
位置：正确，
砌体：{
columnWidth:“.grid sizer”
}
});
//加载每个图像后的布局
$grid.imagesLoaded（）.progress（函数（））{
$grid.ISOTOX（“布局”）；
});
//切换函数
$（“#一个链接”）。单击（函数（）{
$（“#类别”）.toggle（）；
$（“#text_three”）.hide（）；
$（“猫咪画廊”）.hide（）；
$（“#text_two”）.hide（）；
});
$（“#cats_link”）。单击（函数（）{
$（“#猫#画廊”）.toggle（）；
$（“#text_two”）.hide（）；
$（“#text_three”）.hide（）；
});
$（“#两个链接”）。单击（函数（）{
$（“#text_two”）.toggle（）；
$（“#类别”）.hide（）；
$（“猫咪画廊”）.hide（）；
$（“#text_three”）.hide（）；
});
$（“#三个链接”）。单击（函数（）{
$（“#text_three”）.toggle（）；
$（“#类别”）.hide（）；
$（“猫咪画廊”）.hide（）；
$（“#text_two”）.hide（）；
});
*{
列表样式类型：无；
保证金：0；
填充：0；
字体大小：30px；
线高：100%；
游标：默认值；
字体系列：Arial；
}
html，
身体{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.内容{
显示器：flex；
溢出：隐藏；
宽度：100vw；
高度：100vh；
}
.栏目{
右边框：1px实心；
}
.栏目内容{
溢出y：滚动；
宽度：100%；
身高：100%；
填充：20px；
}
.栏目{
显示：无；
}
.专栏：第一个孩子{
显示：块；
}
李：悬停{
光标：指针；
}
#猫图库{
宽度：100%；
身高：100%；
}
.电网{
背景：DDD；
}
/*清晰定位*/
.网格：之后{
内容：''；
显示：块；
明确：两者皆有；
}
/*-----网格项----*/
.grid sizer，
.表格项目{
宽度：33.333%；
}
.表格项目{
浮动：左；
}
.网格项img{
显示：块；
最大宽度：100%；
}


一个
两个链接
三个链接


猫

2（二）是一个数字、数字和字形。它是1后面和3前面的自然数。它是最小且唯一的偶数素数。因为它构成了二元性的基础，它在许多文化中具有宗教和精神意义

3（三）是数字、数字和字形。它是2后面4前面的自然数，是最小的奇数素数。它在许多社会中具有宗教或文化意义

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

在代码中，您需要更改以下内容：

$（“#cats_link”）。单击（函数（）{
$（“#猫#画廊”）.toggle（）；
$（“#text_two”）.hide（）；
$（“#text_three”）.hide（）；
});

为此：

$（“#cats_link”）。单击（函数（）{
$（“#猫#画廊”）。切换（函数（）{
$grid.ISOTOX（“布局”）；
});
$（“#text_two”）.hide（）；
$（“#text_three”）.hide（）；
});

要删除转换，请将
transitionDuration
属性设置为零（0）：

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

$（“#猫#画廊”）。切换（0，函数（）{
$grid.ISOTOX（“布局”）；
});
好的，谢谢！那很有趣。但是，如果我只是复制并粘贴您的代码，库在开始时是可见的。这不应该发生。如果我给它一个»显示：无«，它也不起作用。@Anna_B，好的，为了清楚起见，我对我的答案做了修改。-效果很好，谢谢！最后一个问题：您知道在显示内容时如何删除这些动画吗？仅添加»transitionDuration:0，«不会改变任何内容。
// init Isotope
var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
        columnWidth: '.grid-sizer'
    },
    transitionDuration: 0
});