启动砌体 - 经过无限滚动和参数搜索

Question

遇到AJAX和Masonry网格问题.砌体网格很简单,不适合在适当的时刻启动.

在滚动或使用参数搜索转到特定类别之前,它可以很好地工作.

样本网站可以在这里找到.

---

石工

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

只有bootstrap:

Bootstrap和Masonry:

---

滚动时

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

使用参数搜索时

在AJAX之后,Masonry没有被解雇.这意味着它根本不起作用.所以列没有砌体加载.

请参阅示例站点.

---

滚动和参数搜索都由Toolset提供.它们有一个很好的系统,可以在特定时间轻松加载JS:

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

因此,在分页后以及参数搜索之前/期间/之后.由于问题是在滚动之后,并且在参数搜索的结果更新之后,我想在此时启动砌体网格.

最简单的例子是滚动完成或分页,因为它也被调用.

我试过了什么

我用过,reloadItems因为我猜对了.如果我错了,请纠正我.资源.

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:

控制台错误

加载页面时

未捕获的ReferenceError:未定义数据

滚动时

未捕获的ReferenceError:未定义$ container

将功能更改为以下内容

  (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 );
}); 

更新的图像加载到最新版本

我还更新了images加载到最新版本.

脚本可以在这里找到.

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