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

Question

遇到AJAX和Masonry grid的问题。砌体网格很容易在适当的时刻启动。

在滚动或使用参数搜索转到特定类别之前，它可以很好地运行。

可以找到示例网站here。

砌体

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

仅限bootstrap：

Bootstrap和Masonry：

滚动时

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

使用参数搜索时

在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')  
});

但这也不起作用。

通过使用其中一种方法，也可以在页脚中添加砌体。

(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加载到最新版本。

可以找到脚本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

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

然后使用以下内容：

Dim propInfo = control.GetType.GetProperty("TagName")

这是在footer.php中添加的。