页面加载

Question

我将这些代码放在</body>

之前的最后低点

<script type="text/javascript">
        var $grid = $('.grid').masonry({
            // options
            itemSelector: '.grid-item',
            columnWidth: 230
        });
        $grid.masonry(); //not work

        function test() {
            $grid.masonry(); //it work
        }
</script>

当我运行页面时，显示： http://i.stack.imgur.com/P3OgW.jpg砌筑不起作用。

现在我更改webbrowser（chrome / IE / Firefox）的宽度，是有效的。 http://i.stack.imgur.com/ZumGW.jpg

所以，我用代码＆＃34;创建了一个函数名测试。 $ grid.masonry（）;＆＃34;并运行它，它工作。

我很惊讶javascript会在页面加载就绪之后运行，但是在这里我必须手动运行功能测试来实现它。

发生了什么事？

/ ************************但仍然没有工作****************** ********* /

<script type="text/javascript">
        $(document).ready(function() {
            var $grid = $('.grid').masonry({
                // options
                itemSelector: '.grid-item',
                columnWidth: 230
            });
            $grid.masonry(); // not work
            console.log('the code is running!'); // it work
        });

        function test() {
            var $grid = $('.grid').masonry({
                // options
                itemSelector: '.grid-item',
                columnWidth: 230
            });
            $grid.masonry(); // it work
        }
    </script>

/ ********************************************** ******************* /

好的，我找到了一种方法来解决它但不优雅。像这样：

var timeId = setTimeout(function() {
    $grid.masonry();
}, 100);