带有 ajax 选项卡的砌体答案

【问题标题】：Masonry with ajax tabs带有 ajax 选项卡的砌体
【发布时间】：2018-06-05 21:41:07
【问题描述】：

我正在尝试将砌体与 ajax 选项卡一起使用，但不幸的是它显示出很大的差距。这是我的代码

$.ajax({
type: 'POST',
url: ajaxurl,
data: {
    action:'activity_load',
    'tab_activity_type_object': tab_activity_type_object
},
success:function(data) {
    $( ".tab-content .tab-content-list" ).empty();
    $( ".tab-content .tab-content-list" ).append(data);
},
error: function(errorThrown){
    $( ".tab-content .tab-content-list" ).append( "Data error" );
    console.log(errorThrown);
}
});


jQuery(function(){
var $container = jQuery('.tab-content-list');
$container.masonry({
  itemSelector: 'li.activity-item'
});
});

我在这里找到了一些解决方案 -> https://masonry.desandro.com/methods.html 但是我不确定如何使用上面的代码。

【问题讨论】：

我过去遇到过这个问题，并使用自定义 CSS 来优化空白间隙。这个想法是砌体在引擎盖下使用 CSS 来做同样的事情。但是，只要您的 CSS 隔离器比砌体更具声明性，它就会用您自己的覆盖砌体的 CSS。调整边距道具应该可以解决问题。

标签： ajax wordpress jquery-masonry

【解决方案1】：

解决方案比我想象的要简单

 $( ".tab-content .tab-content-list" ).append(data).masonry( 'reload' );

【讨论】：