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 を非表示にする代わりに、div を使用visibility:hiddenしてみてください。このようにして、メイソンリーはリロード時にこれらの div を考慮に入れることができるはずです。

于 2013-10-18T11:46:17.420 に答える
2

これはかなり古いことは知っていますが、最初にdisplay: noneが設定されていたdivに石積みをロードしたいという同様の問題がありました。div を表示すると、石積みが正しく表示されませんでした。私は石積みを正常にリロードしました：

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

そして、すべてのタイルが正しく配置されました。

于 2015-12-09T14:48:18.810 に答える