我正在尝试将Masonry用于一个项目,但我对JS缺乏经验.我遇到了一个问题,即隐藏砌体网格中的第一个项目导致其余的网格项形成一个列.
我可以隐藏和显示我想要的其他项目,而不是它看起来的第一个.
下面的编码重现问题,按“创建”以形成砌体布局,然后“隐藏”以隐藏具有“特殊”类的div …
http://codepen.io/anon/pen/ByxmMv
从第一个div中删除“特殊”类将演示所需的布局行为.
我希望我只是做错了但如果我不能有人展示出一种解决方法?
谢谢你的帮助.
<!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="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//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>
解决方法:
您可以添加’sizer’元素以获得适当的宽度:
msnry = new Masonry( container, { itemSelector: ".item", columnWidth: '.sizer', isAnimated: true });
http://codepen.io/herihehe/full/ravYEL/
来源:https://www.icode9.com/content-1-292901.html联系客服