jquery masonry 在初始页面加载时崩溃，单击“主页”菜单按钮后工作正常答案

【问题标题】：jquery masonry collapsing on initial page load, works fine after clicking "home" menu buttonjquery masonry 在初始页面加载时崩溃，单击“主页”菜单按钮后工作正常
【发布时间】：2013-02-16 02:07:39
【问题描述】：

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

这是site的链接。

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

我对编写任何脚本都很陌生，所以请善待。

【问题讨论】：

演示问题的小提琴会很有用。

标签： jquery css wordpress cross-browser jquery-masonry

【解决方案1】：

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

试试这个。

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

【讨论】：

完美，伊万。谢谢！对于任何可能使用它的人来说，这是一个小错误。函数后缺少关闭“）”：$(window).load(function()

【解决方案2】：

我也遇到了类似的问题，图像在第一次加载时重叠。我通过首先加载图像克服了这个问题。

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

如果图像已加载，则必须开始砌体的职责。它应该可以正常工作。

【讨论】：