jquery masonry在初始页面加载时崩溃,单击"主页"菜单按钮后工作正常

Question

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

我在functions.php中有这个代码,用于将masonry和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 } ?>

这是该网站的链接.

任何想法为什么这在初始页面加载时奇怪地加载？

我很擅长编写任何东西,所以请善待.

Answer 1

我认为这是因为脚本在内容(图像)完全加载之前运行.因此定位错误.

试试这个.

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