单击过滤器选项时，帖子/图像重叠，并在窗口调整大小后显示在砖石视图中

Posted 2021-05-05

我创建了一个过滤器来显示我的帖子流行度明智，风格明智和国家明智。

截图：

Screenshot 1: Working fine when page loads it shows all the posts/images properly in masonry.

Screenshot 2: When clicking on filter menus

默认情况下，它在砖石网格视图中显示帖子/图像。

当我点击热门链接/按钮时，它会显示帖子的流行度。

问题是，当我点击热门链接/按钮时，它显示帖子/图像，但所有这些都是重叠的。当我调整页面/窗口的大小时，它会在砌体视图中显示帖子/图像。

这是代码：

JS：

jQuery(document).ready(function($) {

  // init Masonry  
  var $grid = jQuery('#images').masonry({
  // options...
  itemSelector: '.item',
  isFitWidth: true,
  columnWidth: 1
  });

  // layout Masonry after each image loads
  $grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
  });

  jQuery("span.popularFilter").click(function(){
  var popular = jQuery(this).attr('data-slug');

  jQuery.ajax({
  url : ajaxurl,
  type : 'post',
  data : {
  action : 'post_popular_filter',
  popular_attr : popular
  },
  success : function( response ) {
  jQuery("#images").html(response); 
  $grid.masonry('reloadItems')
  }
  });
  });

});

请帮忙

答案

得到了解决方案：

function masonaryGrid(){
setTimeout(function(){
$grid.masonry('reloadItems')
$grid.masonry('layout');
},true)
}

// init Masonry  
var $grid = jQuery('#images').masonry({
// options...
itemSelector: '.item',
isFitWidth: true,
columnWidth: 1
});

// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});

jQuery("span.popularFilter").click(function(){
var popular = jQuery(this).attr('data-slug');

jQuery.ajax({
url : ajaxurl,
type : 'post',
data : {
action : 'post_popular_filter',
popular_attr : popular
},
success : function( response ) {
jQuery("#images").html(response); 
masonaryGrid();
}
});
});