Posts/Images 单击过滤器选项时重叠，并在 window 调整大小后显示在砌体视图中

Question

我创建了一个过滤器来显示我的帖子受欢迎程度、风格和风格国家明智。

截图：

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

Screenshot 2: When clicking on filter menus

默认情况下，它在砌体网格视图中显示 posts/images。

当我点击热门 link/button 时，它会显示帖子的热门程度。

问题是当我点击流行的 link/button 时，它显示 posts/images 但它们都是重叠的。当我调整 page/window 的大小时，它会在砌体视图中显示 posts/images。

代码如下：

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

});

请帮忙

Answer 1

得到解决方案：

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

Posts/Images 单击过滤器选项时重叠，并在 window 调整大小后显示在砌体视图中

Posts/Images overlapped when clicked on filter options and display in masonry view after window resize

php

css

ajax

filter

masonry