jQuery的砌体崩于初始页面加载，点击“主页”菜单按钮后工作正常(jquery masonry c

我的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 } ?>

这是对一个链接的网站 。

任何想法，为什么这是奇怪的加载在初始页面加载？

我很新的脚本什么，所以请善待。

Answer 1:

我想这是因为剧本正在的内容（图片）之前运行是满载。 因此，定位误差。

试试这个。

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

Answer 2:

我也有过类似的问题，图像是在第一加载时间重叠。 我首先加载图像克服这一点。

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

如果图像加载那么你的砖石的职责已启动。 它应该很好地工作。

文章来源: jquery masonry collapsing on initial page load, works fine after clicking “home” menu button