javascript - 显示无后 Masonry 无法正常工作

Question

我目前正在使用 Masonry 来制作列表，这是我的问题...

我有一些不同类型的div内容，我希望它一次只显示其中一种类型。

我的做法是申请display:none在被javascript过滤掉的div上，并应用 display:block就选择了div .

但奇怪的是，在我调用 Masonry 之后，它使所有可见的 div排成一列，这不是我所期望的......

这是我的代码:

$(function() {
	
  let m = $('#masonry');
  let item = $('.item');
  
  m.masonry({
  	itemSelector: '.item',
    columnWidth: 0
  });
  
  $('#false').on('click', function() {
  	for(let i = 0; i < item.length; i ++) {
    	$(item[i]).show();
    }
		
  	for(let i = 0; i < item.length; i ++) {
      if($(item[i]).data('hide') != false) {
        $(item[i]).hide();
      } else {
        $(item[i]).show();
      }
    }
    m.masonry();
  })
  
  $('#true').on('click', function() {

  	for(let i = 0; i < item.length; i ++) {
    	$(item[i]).show();
    }
    
    for(let j = 0; j < item.length; j ++) {
    	if($(item[j]).data('hide') != true) {
      	$(item[j]).hide();
      } else {
      	$(item[j]).show();
      }
    }
    m.masonry();
  })
  
  $('#pooo').on('click', function() {

  	for(let i = 0; i < item.length; i ++) {
    	$(item[i]).show();
    }
    
    for(let j = 0; j < item.length; j ++) {
    	if($(item[j]).data('hide') != null) {
      	$(item[j]).hide();
      } else {
      	$(item[j]).show();
      }
    }
    m.masonry();
  })
})

.item {
  padding: 5px;
  width: 20%;
}

.inner {
  background: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>

<div id="masonry">
  <div class="item">
    <div class="inner">
      <br><br><br><br><br><br>
    </div>
  </div>
  <div class="item" data-hide="null">
    <div class="inner"><br><br><br><br><br></div>
  </div>
  <div class="item" data-hide="true">
    <div class="inner"><br><br><br></div>
  </div>
  <div class="item" data-hide="false">
    <div class="inner"><br><br><br><br><br></div>
  </div>
  <div class="item" data-hide="true">
    <div class="inner"><br><br><br></div>
  </div>
  <div class="item" data-hide="null">
    <div class="inner"><br><br><br><br><br></div>
  </div>
  <div class="item" data-hide="true">
    <div class="inner"><br><br><br><br></div>
  </div>
  <div class="item" data-hide="false">
    <div class="inner"><br><br><br><br></div>
  </div>
  <div class="item" data-hide="null">
    <div class="inner"><br><br><br></div>
  </div>
  <div class="item" data-hide="false">
    <div class="inner"><br><br><br><br><br><br><br><br></div>
  </div>
</div>

<button id="false">false</button>
<button id="true">true</button>
<button id="pooo">pooo</button>

有什么建议吗？

Answer 1

好吧，我在评论中的假设是正确的，Masonry 已经有一个解决方案，那就是 columnWidth。

只需添加一个具有我想要的宽度的 div 作为 columnWidth 值的引用，例如 $.masonry({columnWidth: '#theDivWithWidth '}) 它应该可以解决问题...

我认为案件已结 XD