Javascript 为什么这个代码在codepen中工作，而不是实际的站点/小提琴？

我正在从Codepen中分出这段代码用于我的网站，但我不知道除了Codepen之外，它为什么会在其他地方被破坏。我也试着在JS Fiddle上测试它，结果是一样的。请看一看：

（函数（$）{
"严格使用",；
$（窗口）。加载（函数（）{
$（'.mashise'）。mashise({
columnWidth:“.grid sizer”，
排水沟：'.排水沟尺寸'，
itemSelector:“.item”
});
});
}（jQuery））
*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
背景：黑色；
}
@介质（最大宽度：480px）{
.砖石{
利润率：3%0；
}
.砌体.格栅筛{
宽度：48.5%；
}
.砌体.排水沟尺寸测定器{
宽度：3%；
}
.砌体.项目{
宽度：48.5%；
利润底部：3%；
}
.砌体。项目img{
宽度：100%；
}
}
@仅介质屏幕和（最大宽度：xxspx）{
.砖石{
利润率：3%0；
}
.砌体.格栅筛{
宽度：48.5%；
}
.砌体.排水沟尺寸测定器{
宽度：3%；
}
.砌体.项目{
宽度：48.5%；
利润底部：3%；
}
.砌体。项目img{
宽度：100%；
}
}
@介质（最小宽度：481px）和（最大宽度：767px）{
.砖石{
利润率：2.25%0；
}
.砌体.格栅筛{
宽度：31.83333%；
}
.砌体.排水沟尺寸测定器{
宽度：2.25%；
}
.砌体.项目{
宽度：31.83333%；
利润底部：2.25%；
}
.砌体。项目img{
宽度：100%；
}
}
@介质（最小宽度：768px）{
.砖石{
利润率：2%0；
}
.砌体.格栅筛{
宽度：23.5%；
}
.砌体.排水沟尺寸测定器{
宽度：2%；
}
.砌体.项目{
宽度：23.5%；
利润底部：2%；
}
.砌体。项目img{
宽度：100%；
}
}
@介质（最小宽度：992px）{
.砖石{
利润率：1.875%0；
}
.砌体.格栅筛{
宽度：18.5%；
}
.砌体.排水沟尺寸测定器{
宽度：1.875%；
}
.砌体.项目{
宽度：18.5%；
利润底部：1.875%；
}
.砌体。项目img{
宽度：100%；
}
}
@介质（最小宽度：1200px）{
.砖石{
利润率：1.8%0；
}
.砌体.格栅筛{
宽度：15.16667%；
}
.砌体.排水沟尺寸测定器{
宽度：1.8%；
}
.砌体.项目{
宽度：15.16667%；
利润底部：1.8%；
}
.砌体。项目img{
宽度：100%；
}
}
您需要通过在HTML中添加以下代码来包括代码正在使用的库（Mashise和jQuery）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
背景：黑色；
}
@介质（最大宽度：480px）{
.砖石{
利润率：3%0；
}
.砌体.格栅筛{
宽度：48.5%；
}
.砌体.排水沟尺寸测定器{
宽度：3%；
}
.砌体.项目{
宽度：48.5%；
利润底部：3%；
}
.砌体。项目img{
宽度：100%；
}
}
@仅介质屏幕和（最大宽度：xxspx）{
.砖石{
利润率：3%0；
}
.砌体.格栅筛{
宽度：48.5%；
}
.砌体.排水沟尺寸测定器{
宽度：3%；
}
.砌体.项目{
宽度：48.5%；
利润底部：3%；
}
.砌体。项目img{
宽度：100%；
}
}
@介质（最小宽度：481px）和（最大宽度：767px）{
.砖石{
利润率：2.25%0；
}
.砌体.格栅筛{
宽度：31.83333%；
}
.砌体.排水沟尺寸测定器{
宽度：2.25%；
}
.砌体.项目{
宽度：31.83333%；
利润底部：2.25%；
}
.砌体。项目img{
宽度：100%；
}
}
@介质（最小宽度：768px）{
.砖石{
利润率：2%0；
}
.砌体.格栅筛{
宽度：23.5%；
}
.砌体.排水沟尺寸测定器{
宽度：2%；
}
.砌体.项目{
宽度：23.5%；
利润底部：2%；
}
.砌体。项目img{
宽度：100%；
}
}
@介质（最小宽度：992px）{
.砖石{
利润率：1.875%0；
}
.砌体.格栅筛{
宽度：18.5%；
}
.砌体.排水沟尺寸测定器{
宽度：1.875%；
}
.砌体.项目{
宽度：18.5%；
利润底部：1.875%；
}
.砌体。项目img{
宽度：100%；
}
}
@介质（最小宽度：1200px）{
.砖石{
利润率：1.8%0；
}
.砌体.格栅筛{
宽度：15.16667%；
}
.砌体.排水沟尺寸测定器{
宽度：1.8%；
}
.砌体.项目{
宽度：15.16667%；
利润底部：1.8%；
}
.砌体。项目img{
宽度：100%；
}
}

您忘了在jsfiddle上包含必要的文件请原谅我的无知，哪些是必要的文件？。查看错误消息。“jQuery未定义”应该告诉您很多。您在codepen上包含了它们，但没有在JSFIDLE上，我猜您在其他网站上也会遇到问题。