Question

我正在使用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，只有在你选择一个选项时才会出现。砌体仅适用于可见的div，但是对于隐藏的div不起作用，当我选择一个选项时div会出现但重叠。

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

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

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

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

Answer 1

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

Answer 2

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

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

所有瓷砖都正确对齐。

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

2 个答案: