CODEWITHSUNDEEP
javascriptjqueryjquery-masonrymasonry
LeoCantThinkofAName
LeoCantThinkofAName

Reputation: 177

Masonry doesn't work properly after display none

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?

Upvotes: 1

Views: 1373

Answers (1)

LeoCantThinkofAName
LeoCantThinkofAName

Reputation: 177

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 e.g.$.masonry({columnWidth: '#theDivWithWidth'}) and it should do the trick...

Case close I think XD

Upvotes: 1

Related Questions