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

我的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中：

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

这是该网站的链接。

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

我很擅长编写任何东西，所以请善待。

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 } }); } 

如果图像被加载，那么只有你的砌体的职责必须开始。 它应该工作正常。

谢谢，Vadivukarasi Sivanesan