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

Question

I'm currently using Masonry to make a list, here's my problem...

I have some different type of div content, and I want it to display only one type of them at once.

The way I do is apply display:none on the div which are filtered out by javascript, and apply display:block on the chosen div .

But weird is after I call Masonry, it makes all of the visible div line up in one column, which is not what i expected...

here's my code:

 $(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> 

Any suggests?

Answer 1

OK, my assumption in comment is right, And Masonry already has a solution for it, which is columnWidth .

By simply add a div with the width I want as a reference for the columnWidth 's value eg $.masonry({columnWidth: '#theDivWithWidth'}) and it should do the trick...

Case close I think XD