砌体不能正常显示后无来者

我目前使用的砌体做一个列表工作，这里是我的问题......砌体不能正常显示后无来者

我有一些不同类型的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

砌体不能正常显示后无来者

回答

相关问题