Когда первый классовый «элемент» скрыт, все остальные элементы формируются в один столбец

Я пытаюсь использовать масонство для проекта, но я неудачник неопытный с JS. Я столкнулся с проблемой, когда скрытие первого элемента в сетке масонства заставляло остальные элементы сетки формироваться в один столбец.Когда первый классовый «элемент» скрыт, все остальные элементы формируются в один столбец

Я могу скрыть и показать как можно больше других предметов, как я хочу, только не первый из них кажется.

codepen ниже воспроизводит эту проблему, нажмите кнопку «Создать», чтобы сформировать макет масонства затем «Hide», чтобы скрыть дивы с классом «специальный» ...

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="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

Чистый обходной путь, но вы потеряете эффект перехода. –

Когда первый классовый «элемент» скрыт, все остальные элементы формируются в один столбец

ответ

Смежные вопросы