0

我正在使用 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');

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

4

2 回答 2

2

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

于 2013-10-18T11:46:17.420 回答
2

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

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

并且所有瓷砖都正确对齐。

于 2015-12-09T14:48:18.810 回答