woocommerce中带有砖石的无限滚动不起作用答案

【问题标题】：Infinite scroll with masonry in woocommerce not workingwoocommerce中带有砖石的无限滚动不起作用
【发布时间】：2013-10-30 10:06:34
【问题描述】：

在将 Wordpress 中的无限滚动插件与使用砖石的主题集成时，我遇到了一个令人讨厌的问题。

我有最新版本的无限滚动，2.6.2，我在插件的回调部分添加了这段代码：

// hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
    $container.masonry( 'appended', $newElems, true );
});

但它不起作用，它为新元素添加了不透明度，但它没有添加位置等，所以不太有效；新产品位于旧产品上方的页面顶部。

脚本如下：

/* <![CDATA[ /
var infinite_scroll = "{\"loading\":{\"msgText\":\"Loading...<\\/em>\",\"finishedMsg\":\"No additional products.<\\/em>\",\"img\":\"http:\\/\\/www.test.com\\\/wp-content\\\/plugins\\\/infinite-scroll\\\/img\\\/ajax-loader.gif\"},\"nextSelector\":\".next\",\"navSelector\":\".woo-pagination\",\"itemSelector\":\"li.product\",\"contentSelector\":\"ul.products\",\"debug\":false,\"behavior\":\"\",\"callback\":\"\\\/\\\/ hide new items while they are loading\r\nvar $newElems = jQuery(newElements).css({ opacity: 0 });\r\n\\/\\/ ensure that images load before adding to masonry layout\r\n$newElems.imagesLoaded(function(){\r\n\\/\\/ show elems now they're ready\r\n$newElems.animate({ opacity: 1 });\r\n$container.masonry( 'appended', $newElems, true );\r\n});\"}";
/ ]]> */

砌体看起来像：

// Only fire masonry if the window is an appropriate size and images are loaded
jQuery(function(){
    var $container = jQuery('ul.products');
    $container.imagesLoaded( function(){
        if (jQuery(window).width() > 767) {
            $container.masonry({
                itemSelector : 'li.product',
                columnWidth : 295,
                isFitWidth: true,
                gutterWidth : 2
            });
        }
    });
});

【问题讨论】：

标签： javascript jquery wordpress jquery-masonry infinite-scroll

【解决方案1】：

wordpress无限滚动插件：Here's the link，有一个名为behavior的选项，可以选择Masonry，当然你需要选择正确的选择器，然后像魅力一样工作，查看更多开发选项，您可以访问the developers website

【讨论】：