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

Question

AJAX 和Masonry grid 有问题。砌体网格很简单，没有在正确的时间启动。

在滚动或使用参数搜索转到特定类别之前，它的效果非常好。

可以在here找到示例网站。

---

砌体

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

仅引导程序：

引导和砌体：

---

滚动时

下一列将添加到旧列之上。提供与unloaded images 几乎相同的输出，这使得图像重叠。这通常可以通过使用我已经包含在提供的代码中的imagesLoaded 来解决。

使用参数搜索时

在 AJAX 之后，Masonry 没有被解雇。这意味着它根本不起作用。所以在没有砌体的情况下加载列。

请看sample site。

---

滚动搜索和参数搜索均由Toolset 提供。他们有一个很好的系统，可以很容易地在特定时间加载 JS：

• AJAX Pagination with Toolset 完成后。
• 触发参数搜索时。
• 何时收集到参数搜索数据。
• 参数搜索表单何时更新。
• 参数搜索结果何时更新。

所以在分页之后和之前/期间/之后Parametric search。由于问题是在滚动之后，并且在参数搜索的结果更新之后，我想在此时启动 Masonry 网格。

最简单的例子是滚动完成时，或者也称为分页。

我尝试过的

我使用了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')  
});

但这也不起作用。

Masonry 也使用其中一种方法添加到页脚中。

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

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

---

编辑 1：

控制台错误

加载页面时

Uncaught ReferenceError: data is not defined

滚动时

Uncaught ReferenceError: $container is not defined

把函数改成如下

  (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>

等等。

仍然是控制台错误。

有什么解决办法吗？

Answer 1

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

然后使用以下内容：

(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中添加的。