同位素未捕获类型错误答案

【问题标题】：Isotope Uncaught TypeError同位素未捕获类型错误
【发布时间】：2015-11-08 22:14:00
【问题描述】：

我目前正在开发一个 Wordpress 主题。我正在尝试根据以下教程将 Isotope 集成到我的 Wordpress 主题中：

https://redvinestudio.com/how-to-build-isotope-portfolio-in-your-wordpress-theme/

但是，我目前正在努力学习本教程的 jQuery 部分。当我查看控制台时，我收到一条日志：“Uncaught TypeError: $(...).smartresize is not a function”。

这几乎导致我的投资组合在同位素砌体布局附近看不到任何地方..

所以我一直在寻找一些解决方案，问题可能是本教程是在 2014 年编写的。当时是 Isotope V1 出来的时候。现在，Isotope V2 出来了。所以我可能需要更改 isotope.filtering.js 文件中的一些内容。但我真的不知道要改变什么？我试图在同位素文档中找到我的解决方案，但它并没有真正帮助我。

有什么想法吗？

【问题讨论】：

标签： php jquery wordpress jquery-isotope

【解决方案1】：

https://github.com/metafizzy/isotope/issues/781

smartresize 不包含在新同位素中，因为它已准备好进行响应式布局。

也检查一下：http://isotope.metafizzy.co/appendix.html#upgrading-from-v1 和这个：http://isotope.metafizzy.co/layout-modes/masonry.html#isfitwidth

【讨论】：

您好，感谢您提供有用的链接！现在就尝试一些这样的东西！如果它帮助了我，会告诉你。
应该不难。如果您的页面上有多个同位素容器，只需使用$('.container').each(function(){$(this).isotope({//isotope options here})}); 调用它们，并将itemSelector 设置为您的图像，使用display:inline-block; 以百分比定义，外部容器为font-size:0;。这样，即使在同位素开始之前，您也可以确保您的图像整齐排列。$('.container') 是您的图像容器 ofc。百分比宽度将确保响应能力（即和媒体查询）:)
您的.futr-portfolio .portfolio-item 有float 和display:inline-block。这是没有意义的，因为float 元素不在页面流中，默认情况下是block。所以删除浮动，即使在使用 ctrl+R 刷新时也应该可以工作:)
嗯，这很奇怪。我删除了浮动并尝试了display: inline-block 和display: inline。但是，我的元素在 CTRL + R 刷新时没有正确定位。我尝试更改 JS 文件的层次结构，将我的 isotope-filtering.js 加载到 isotope.js 前面，反之亦然。但这似乎也没有什么不同......
奇怪，inline-block 应该可以解决问题。不要对齐它们inline，这不是一个好方法。尝试使用imagesLoaded 等待图像加载，然后在加载后触发砌体。还有inline-block:D