Question

我有一个页面，其中有许多div逐个排列，并且它们处于砌体效果下。

砌体工作正常，但唯一的问题是div有一个发表评论的地方，每当我们发表评论时，div的高度都会增加，但是masonary dosent会重新排列div。

div正在通过ajax重新加载

 <script>
    $(document).ready(function() {
      var $container = $('#REATinsidEpoASttt78');
      $container.imagesLoaded(function(){
          $container.masonry({
              itemSelector : '.realFLOAtingPOSTSA',
              columnWidth : 350
          });
      });
    });
  </script>

这是用于砌体，现在用于重新加载div

function formsubmitionbyajax(obj){
    var id=$(obj).attr("id");
    var currentform = $(obj);
    $('#COMMlo'+id).show();
    $.ajax({ type: 'post',
        url: 'home_formhandler1.php',
        data: currentform.serialize(),
        success: function(){
            $("#mainDIV"+id).load('home.php #mainDIV'+id);
        } 
    });
    return false;   
}

我的HTML看起来像

<div id="REATinsidEpoASttt78">
  <div class="realFLOAtingPOSTSA">
    <div id="mainDIVffrmMN<?=$THE_DTAinar['id']?>">
       something from database....
    </div>
  </div>
</div>

任何人都可以告诉我如何在任何div的高度发生任何变化时重新排列div。更新布局目前我正在使用像

var container = document.querySelector('#REATinsidEpoASttt78');
var msnry = new Masonry( container, {
    columnWidth: 350
});
setTimeout(function () { msnry.layout();   }, 2000);

这是有效的，但它安排div延迟2秒我寻找更好的东西

Answer 1

尝试使用resize event之类的，

var container = document.querySelector('#REATinsidEpoASttt78');
var msnry = new Masonry( container, {
                 columnWidth: 350
           });
$('#REATinsidEpoASttt78').on('resize',function () {  // use resize
   msnry.layout();
});

更新div高度时的布局

1 个答案: