如何将砌体应用于隐藏的 div？答案

【问题标题】：How to apply masonry to hidden div?如何将砌体应用于隐藏的 div？
【发布时间】：2013-10-18 10:13:22
【问题描述】：

我正在使用 jquery Masonry 进行网格布局。

<div id="container">
    <div class="item">[...]</div>
    <div class="item">[...]</div>
    <div class="item">[...]</div>
    <div class="item">[...]</div>
    <div class="item">
        <select id="selectorColors">
            <option value="red">Red</option>
            <option value="yellow">Yellow</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="item">
        <div class="colors"></div>
    </div>
    <div class="item">[...]</div>
</div>
<script type="text/javascript">
    $('#container').masonry({
        itemSelector: '.item',
        columnWidth: 90
    });
</script>

但在我的情况下，我有一些隐藏的 div，只有在您选择一个选项时才会出现。 Masonry 仅适用于可见 div，但对于隐藏 div 不起作用，当我选择一个选项时，div 出现但重叠。

$('select').change(function(){  
    if($('select').val() == '') {
        $('div.colors').hide();
    } else {
        $('div.colors').show();         
    }
});

我尝试使用reload 方法重新加载项目，如下所示：

$('div.colors').show().masonry('reload');

但不起作用。我做错了什么？

【问题讨论】：

文档说要使用.masonry('reloadItems') 而不是.masonry('reload');
我试过但没有用。谢谢！

标签： jquery jquery-masonry

【解决方案1】：

不要隐藏 div，而是尝试在它们上使用visibility:hidden。这样砌体应该能够在重新加载时考虑这些 div。

【讨论】：

【解决方案2】：

我知道这已经很老了，但我遇到了类似的问题，我想在最初设置 display: none 的 div 中加载砖石。当我显示 div 时，砌体没有正确显示。我成功地重新加载了砖石：

$('#masonry').masonry();

所有图块都正确对齐。

【讨论】：