显示无后砌体无法正常工作答案

【问题标题】：Masonry doesn't work properly after display none显示无后砌体无法正常工作
【发布时间】：2017-05-26 08:05:26
【问题描述】：

我目前正在使用 Masonry 制作清单，这是我的问题...

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

我的做法是在被javascript过滤掉的div上应用display:none，然后在选定的div上应用display:block。

但奇怪的是，在我打电话给 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>

有什么建议吗？

【问题讨论】：

好的...我发现这可能是由于隐藏了第一个砖石项目造成的...我正在努力，祝我好运。 XD

标签： javascript jquery jquery-masonry masonry

【解决方案1】：

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

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

我认为结案了 XD

【讨论】：