Question

我的砌体代码存在问题。

它在页面加载时工作正常，但是可以过滤砌体内部的项目，我使用ajax进行此操作，并且我用元素替换整个div以显示已过滤的项目。

在这种情况发生后，砌体代码不会再次应用而且会崩溃。

即使内容在页面加载后发生变化，如何确保砌体仍然适用？

在我的页脚中，我有以下代码：

<script type="text/javascript">
  $(document).ready(function() {
      $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
      });
  });
</script>

然后在我的custom.js中，我有以下内容：

$( document ).ready(function() {

   /* Ajax code voor aanbiedingen */
  $("#branche").on('change', function() {
    var option = $('#branche > option').filter(':selected');

    if(option.val() == 'default'){
      $.post("includes/ledenall.php", {
        filter: option.val()
      }, function(result){
        $("#content1").html(result);

      });
    }else{
      $.post("includes/leden.php?option=" + option.val(), {
        filter: option.val()
      }, function(result){
        $("#content1").html(result);
      });
    }
  });
});

返回我的php文件，但这次没有应用砌体。

我该怎么办？

Answer 1

更改DOM后，您可以尝试重新应用同位素库：

/* Ajax code voor aanbiedingen */
$("#branche").on('change', function() {
  var option = $('#branche > option').filter(':selected');

  if(option.val() == 'default'){
    $.post("includes/ledenall.php", {
      filter: option.val()
    }, function(result){
      $("#content1").html(result);
      $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
      });
    });
  }else{
    $.post("includes/leden.php?option=" + option.val(), {
      filter: option.val()
    }, function(result){
      $("#content1").html(result);
      $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
      });
    });
  }
});

我不知道在更新后的DOM中是否完全替换.gridlist。如果没有，您可能需要以某种方式＆＃34;删除＆＃34;旧的同位素实例，但这是你需要做的事情。

Answer 2

将您的代码添加到函数

function func() {
    $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
    });
}

然后您可以调用该功能并在您想要的任何位置应用同位素

在pageload之后重新应用javascript

2 个答案: