砌體不能正常顯示後無來者

我目前使用的砌體做一個列表工作，這裏是我的問題......砌體不能正常顯示後無來者

我有一些不同類型的div內容，，我希望它顯示只有一種類型的他們一次。

我的做法是在div上應用display:none，並通過javascript篩選出來，並在選定的div上應用display:block。

但奇怪的是我打電話砌體後，它使所有可見的div排隊的一列，這不是我所期待...

這裏是我的代碼：

$(function() { 
 
\t 
 
    let m = $('#masonry'); 
 
    let item = $('.item'); 
 
    
 
    m.masonry({ 
 
    \t itemSelector: '.item', 
 
    columnWidth: 0 
 
    }); 
 
    
 
    $('#false').on('click', function() { 
 
    \t for(let i = 0; i < item.length; i ++) { 
 
    \t $(item[i]).show(); 
 
    } 
 
\t \t 
 
    \t 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() { 
 

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

 
    \t for(let i = 0; i < item.length; i ++) { 
 
    \t $(item[i]).show(); 
 
    } 
 
    
 
    for(let j = 0; j < item.length; j ++) { 
 
    \t if($(item[j]).data('hide') != null) { 
 
     \t $(item[j]).hide(); 
 
     } else { 
 
     \t $(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>

任何建議？

來源

2017-05-26 LeoCantThinkofAName

OK ......我發現這可以通過隱藏第一砌築項目造成的......而我的工作就可以了，祝我好運。 XD – LeoCantThinkofAName

好吧，我在評論中的假設是正確的，而砌體已經有了一個解決方案，它是columnWidth。

通過簡單地添加一個div以我想要的寬度作爲columnWidth的值的參考值，例如， $.masonry({columnWidth: '#theDivWithWidth'})，它應該做的伎倆......

案例接近我覺得XD

來源

2017-05-26 10:01:29 LeoCantThinkofAName

砌體不能正常顯示後無來者

回答

相關問題