jquery砌体在初始页面加载时崩溃，单击“后工作正常”；“家”；菜单按钮

我的jquery砌体设置在初始页面加载时工作异常。它似乎将图像放置在第一行中，第二行的位置与第一行重叠，第三行相同。页面加载后，您可以单击主页按钮或徽标并重新加载页面，页面工作正常

我在functions.php中有这段代码，可以将砌体和jquery脚本放入其中：

if (!is_admin()) {
    wp_enqueue_script('jquery');
    wp_register_script('jquery_min', get_template_directory_uri(). '/js/jquery.min.js', array('jquery'), '1.6.1' );
    wp_enqueue_script('jquery_min');
    wp_enqueue_script('jquery');
    wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.1.06' );
    wp_enqueue_script('jquery_masonry');
}

此脚本位于head.php中：

<?php if (is_page(2)) { ?>
    <script>
        $(function(){
            $('#content').masonry({
                // options...
                itemSelector : '.product',
                columnWidth : 310,
                isAnimated: true,
                animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
                }
            });
        });
    </script>
<?php } ?>

$（函数（）{
$（“#内容”）.砌体({
//选项。。。
itemSelector:“.product”，
列宽：310，
是的，
动画选项：{
持续时间：700，
“线性”，
队列：false
}
});
});

这是指向的链接

你知道为什么在初始页面加载时会奇怪地加载吗

---

我对编写任何脚本都很陌生，所以请友好一点

我认为这是因为脚本是在内容（图像）完全加载之前运行的。因此存在定位误差

试试这个

  $(window).load(function()
  {
      $('#content').masonry({
           itemSelector : '.product',
           columnWidth : 310,
           isAnimated: true,
           animationOptions: {
                duration: 700,
                easing: 'linear',
                queue: false
           }
      });
  });

---

我也有一个类似的问题，第一次加载时图像重叠。我克服了这一点，首先加载图像

$(".id").imagesLoaded(function(){
    $('.id').masonry({
        itemSelector: '.scrapcontent',
        columnWidth: 3,
        isAnimated:true,
        animationOptions: {
            duration: 700,
            easing:'linear',
            queue :false
        }
    });
}

---

如果图像已加载，则您的砖石工作必须开始。它应该很好用。

一把小提琴来演示这个问题会很有用。太好了，伊万。谢谢对于任何可能使用此功能的人来说，都有一个小错误。函数：

$（窗口）。加载（函数（）