Question

我遇到一个难题，无限滚动与砌体一起工作。当无限滚动生效时，新图像会加倍。我查看了论坛并尝试使用不同的回调，但似乎没有工作。我正在使用woocommerce通过wordpress构建我的网站。产品以Masonry格式显示，我试图添加无限滚动。我使用％作为产品宽度的砌体响应，这使得我用于砌体的jquery有点凌乱，这可能增加了砌筑工作的难度。下面是我的砌体+ css im使用的jquery和我在Infinite Scroll插件设置面板中使用的选择器。

jQuery(document).ready(function($) {
var $container = $('ul.products'); 
var Width = $(window).width(); 
var eight = $(window).height(); 

$container.imagesLoaded( function(){
   $('ul.products').fadeIn('slow');
   $('.woo-pagination').fadeIn();   
   $('.artist_description').fadeIn();
   $('.loading').delay(500).fadeOut(1500);
  /* $(".woocommerce-message").fadeOut(2100);*/

$container.masonry({
itemSelector: 'li.product',
animationEngine: 'best-available',
isAnimated : true,
animationOptions: {
   duration: 350,
   easing: 'linear',
   queue: true   
                  },
resizable: true,
masonry: { columnWidth: $container.width()}
});
$(window).smartresize(function(){   
$container.masonry({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width()}
});
});
$(window).smartresize();
})
})

CSS

ul.products {
clear: both;
width: 101%;
display: none;
}
 ul.products li.product {
float: left;
width: 19.95%;
margin-bottom: 0px !important;
}

无限插件设置屏幕

Content Selector : ul.products
Navigation Selector : .Woo-pagination
Next Selector : .next
Item Selector : li.product

在无限滚动插件设置页面的回调框中，我尝试了

function(newElements) {
    // hide new items while they are loading
    var $newElems = $(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 );
    });

如果有人能帮助我解决这个问题，那将是一个巨大的帮助。请尽可能具体，因为我仍在学习jquery，有时不明白应该添加或放置所有内容。此外，如果您对砌体设置的代码有任何建议，或者如果有任何我不需要的内容，请告诉我。

你可以在artadikt.com查看网站，我关闭了调试，以便更容易看到代码。

无限滚动wordpress插件不与砌体一起使用。图像重叠

0 个答案: