javascript - 启动砌体-无限滚动和参数搜索后

AJAX和Masonry grid遇到问题。砌体网格很简单，不能在适当的时候启动。
在滚动或使用参数搜索转到特定类别之前，此方法效果很好。
示例站点可以在here中找到。

石工
Masonry是一个JavaScript网格布局库。通常与Bootstrap或其他无法正确对齐项目的网格系统一起使用。例:
仅 bootstrap :

引导和砌体:


滚动时
接下来的列将添加在较旧的列上方。提供与unloaded images几乎相同的输出，从而使图像重叠。通常，可以通过使用imagesLoaded来解决此问题，该代码已包含在提供的代码中。

使用参数搜索时
在AJAX之后，砌体并未被解雇。意味着它根本不起作用。因此，无需石工即可加载列。
请参阅sample site。


滚动和参数搜索均由Toolset传递。他们有一个很好的系统，可以很轻松地在特定时间加载JS:

AJAX Pagination with Toolset完成之后。

触发参数搜索时。

收集参数搜索数据时。

参数搜索表单已更新时。

参数搜索结果已更新时。

因此，无论是分页之后还是Parametric search之前/之中/之后。由于问题出在滚动之后，并且参数搜索的结果已更新后，我现在想启动“砌体”网格。
最简单的示例是完成滚动或分页(也称为分页)的时间。
我尝试过的
我使用reloadItems，因为我猜是正确的。如果我错了，请纠正我。 Resource。

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
  $container.masonry('reloadItems')
});

根据我的理论，它会在滚动时重新加载所有项目，因此它们的排列方式正确。但这并没有改变。
我也尝试了以下方法:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
  var $container = $('.masonry-container');
        $container.imagesLoaded(function() {
            $container.masonry('reload');
            $container.masonry({
                isInitLayout : true,
                itemSelector: '.col-md-3'
            });
        });
  //and on ajax  call append or prepend
$container.prepend($data).imagesLoaded(function(){
    $container.masonry( 'prepended', $data, true );
});
});

我还尝试在参数搜索结果已更新时重新加载项目。

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
     $container.masonry('reloadItems')
});

但这也不起作用。
通过使用其中一种方法，还可以在页脚中添加砌体。

(function( $ ) {
    "use strict";
    var $container = $('.masonry-container');
    $container.imagesLoaded( function () {
        $container.masonry({
            columnWidth: '.col-md-3',
            percentPosition: true,
            itemSelector: '.col-md-3'
        });
    });
})(jQuery);

你有什么想法？我在哪里做错了？

编辑1:
控制台错误
加载页面时

滚动时

将功能更改为以下内容

  (function( $ ) {
    // Initiate Masonry
    "use strict";
    var $container = $('.masonry-container');
    $container.imagesLoaded( function () {
        $container.masonry({
            columnWidth: '.item',
            percentPosition: true,
            itemSelector: '.item',
            isAnimated: true // the animated makes the process smooth
        });
    });
    $(window).resize(function() {
        $('.masonry-container').masonry({
            itemSelector: '.item',
            isAnimated: true
        }, 'reload');
    });

})(jQuery);

//and on ajax  call append or prepend more items
var $data = $(data).filter(".item");
$container.prepend($data).imagesLoaded(function(){
    $container.masonry( 'prepended', $data, true );
});

更新的图像已加载到最新版本
我还将图像加载到了最新版本。
可以在here中找到脚本。
添加了.item我添加了类.item而不是使用col-md-3，因为我认为这将是一个更好的解决方案。
现在，HTML的含义如下:

<div class="container">
   <div class="masonry-container">
      <div class="item">
         <!-- Content comes here -->
      </div>
      <div class="item">
         <!-- Content comes here -->
      </div>
      <div class="item">
         <!-- Content comes here -->
      </div>
      <div class="item">
         <!-- Content comes here -->
      </div>
      ...
   </div>
</div>

等等。
仍然控制台错误。
有什么办法吗？

最佳答案

通过删除一些重复项等解决了该问题。

然后使用以下命令:

(function( $ ) {
    "use strict";
    var $container = $('.masonry-container');
    $container.imagesLoaded( function () {
        $container.masonry({
          columnWidth: '.item',
          percentPosition: true,
          itemSelector: '.item'
        });
    });

    $( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
        $container.masonry('reloadItems').masonry();
    });

    $( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
        $container.masonry('reloadItems').masonry();
    });

    $( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
        $container.masonry('reloadItems').masonry();
        $container.imagesLoaded( function() {
          $container.masonry();
        });
    });

    $( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
        $container.masonry('reloadItems').masonry();
        $container.imagesLoaded( function() {
          $container.masonry();
        });
    });

})(jQuery);

这已添加到footer.php中。