Javascript jquery.com。imagesLoaded插件不在运行<；头>；

我应该为这个脚本添加什么，以便在head中运行。当我把它放在身体的末端时，它运行得很好。我认为这是因为脚本在加载图像之前启动。范例

var$container=$（'#container'）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.item”，
列宽：300
});
});

执行代码时，

主体（以及
容器
）不存在。在
标题中
应该将代码包装在
$（document）.ready（function（）{…}）中：


$（文档）.ready（函数（）{
var$container=$（“#container”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.item”，
列宽：300
});
});
});

<script>var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 300 
 });
});
</script>

<script>
$(document).ready(function() {
    var $container = $('#container');
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector : '.item',
            columnWidth : 300 
        });
    });
});
</script>