當第一個砌體'物品'被隱藏時，所有剩餘的物品形成一個列

我正在嘗試爲一個項目使用砌體，但我是JS經驗不足的麻煩。我遇到了在砌體網格中隱藏第一個項目的問題，導致其餘的網格項目形成一個列。當第一個砌體'物品'被隱藏時，所有剩餘的物品形成一個列

我可以隱藏和顯示儘可能多的其他項目，但不是它看起來像的第一個項目。

下codepen重現問題，請點擊「Create」，形成佈局砌體然後選擇「隱藏」隱藏與類「特殊」的div ...

卸下類「特殊「從第一個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="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>

來源

2015-02-24 John-MC

您可以添加一個「分級機」元素，以獲得適當的寬度：

 msnry = new Masonry(container, { 
      itemSelector: ".item", 
      columnWidth: '.sizer', 
      isAnimated: true 
     });

http://codepen.io/herihehe/full/ravYEL/

來源

2015-02-24 03:24:56

嘗試從元素移除類「項目」你是隱藏，然後重新通過調用destroy（）和create（）函數來實例化。再次顯示時，請重新添加課程。

function hide() { 
 
    $(".special").removeClass('item').hide(); 
 
    destroy(); 
 
    create(); 
 
} 
 

 
function show() { 
 
    $(".special").addClass('item').show(); 
 
    destroy(); 
 
    create(); 
 
}

http://codepen.io/anon/pen/ByxmMv

來源

2015-02-24 04:13:50 user3618531

一個乾淨的解決方法，但你失去了過渡效果。 – 2015-02-24 05:25:13

當第一個砌體'物品'被隱藏時，所有剩餘的物品形成一個列

回答

相關問題