Javascript 第一次砌筑时'；项目'；将所有剩余项隐藏到单个列中
我试图在一个项目中使用砖石结构，但我对JS缺乏经验。我遇到了这样一个问题：在砖石网格中隐藏第一个项目会导致其他网格项目形成一列 我可以隐藏和显示任意多的其他项目，只是看起来不是第一个 下面的代码笔再现了这个问题，按“创建”形成砖石布局，然后按“隐藏”隐藏带有“特殊”类的div 从第一个div中删除类“special”将演示所需的布局行为 我希望我只是做错了什么，但如果我不是，有人能证明一个变通方法吗 谢谢你的帮助Javascript 第一次砌筑时'；项目'；将所有剩余项隐藏到单个列中,javascript,jquery,css,masonry,Javascript,Jquery,Css,Masonry,我试图在一个项目中使用砖石结构，但我对JS缺乏经验。我遇到了这样一个问题：在砖石网格中隐藏第一个项目会导致其他网格项目形成一列 我可以隐藏和显示任意多的其他项目，只是看起来不是第一个 下面的代码笔再现了这个问题，按“创建”形成砖石布局，然后按“隐藏”隐藏带有“特殊”类的div 从第一个div中删除类“special”将演示所需的布局行为 我希望我只是做错了什么，但如果我不是，有人能证明一个变通方法吗 谢谢你的帮助 <!DOCTYPE html> <html> <
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Masonry</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<script type="text/javascript">
function hide() {
$(".special").hide();
msnry.layout();
}
function show() {
$(".special").show();
msnry.layout();
}
function create() {
container = document.querySelector('#container');
msnry = new Masonry( container, {
itemSelector: ".item",
isAnimated: true
});
}
function destroy() {
msnry.destroy();
}
</script>
<style type="text/css">
#container {
background: #EEE;
max-width: 80%;
margin: 10px;
}
.item {
width: 150px;
height: 150px;
float: left;
background: green;
border: 2px solid #333;
margin: 10px;
}
.item:nth-child(3n){
height: 100px;
}
.special {
background:orange;
}
</style>
</head>
<body>
<button onclick="create()">Create</button>
<button onclick="destroy()">Destroy</button>
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
<div id="container">
<div class="item special"></div>
<div class="item special"></div>
<div class="item special"></div>
<div class="item"></div>
<div class="item special"></div>
<div class="item special"></div>
<div class="item"></div>
<div class="item special"></div>
<div class="item delete"></div>
<div class="item"></div>
<div class="item special"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
砖石建筑
函数hide（）{
$（“.special”）.hide（）；
msnry.layout（）；
}
函数show（）{
$（“.special”）.show（）；
msnry.layout（）；
}
函数create（）{
container=document.querySelector（“#container”）；
msnry=新砌体（容器、{
项目选择器：“.item”，
我说：是的
});
}
函数销毁（）{
msnry.destroy（）；
}
#容器{
背景：#EEE；
最大宽度：80%；
利润率：10px；
}
.项目{
宽度：150px；
高度：150像素；
浮动：左；
背景：绿色；
边框：2倍实心#333；
利润率：10px；
}
.项目：第n个子项（3n）{
高度：100px；
}
.特别的{
背景：橙色；
}
创造
毁灭
隐藏
显示
msnry = new Masonry( container, {
itemSelector: ".item",
columnWidth: '.sizer',
isAnimated: true
});
尝试从隐藏的元素中删除类“item”，然后通过调用destroy（）和create（）函数重新实例化。再次显示时只需重新添加类
函数隐藏（）{
$（.special”）.removeClass（'item'）.hide（）；
破坏（）；
创建（）；
}
函数show（）{
$（“.special”）.addClass（'item'）.show（）；
破坏（）；
创建（）；
}