砌体布局和自定义JQuery文件不在一起工作

我在html的head标记中定义了mansory，如下所示

index.html

<script type="text/javascript" src="{$baseURL}/assets/javascript/masonry.pkgd.min.js"></script>
<script type="text/javascript">
$(function() {
                $('.mediaListContainer').masonry({
                    itemSelector: '.mediaContainerMasonary'
                }).imagesLoaded(function() {
                    $('.mediaListContainer').masonry('reload');
                });;
            });
</script> 
<script type="text/javascript" src="{$baseURL}/assets/javascript/index.js"></script>

$（函数（）{
$（'.mediaListContainer'）。砌体({
项目选择器：'.MediaContainerSonary'
}).imagesLoaded（函数（）{
$（'.mediaListContainer'）.Mashine（'reload'）；
});;
});

我还有自定义Jquery文件index.js。如果我删除了这个脚本，index.js就可以工作了。否则它就不起作用了

基本上，当光标放置在图像上时，我希望有动画效果

---

你能帮我解决这个问题吗？

试着把它添加到末尾，而不是标题。我试着把它添加到末尾。但是如果我有cdn链接，我的index.js就不工作了。请使用链接或JSFIDLE。