javascript - Initiate Masonry - 在无限滚动和参数搜索之后

Question

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

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

可以找到示例站点here .

---

砌体

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

仅自举:

引导和砌体:

---

滚动时

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

使用参数搜索时

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

请参阅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 );
}); 

更新图像加载到最新版本

我也更新了 imagesloaded 到最新版本。

可以找到脚本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 中添加的。