無顯示后砌體無法正常工作

Question

我目前正在使用砌築工列出清單，這是我的問題...

我有一些不同類型的div內容，並且我希望它一次只顯示其中一種。

我的方法是在javascript過濾掉的div上應用display:none ，然后在所選div上應用display:block 。

但是奇怪的是我打電話給石工之后，它將所有可見的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