Question

我正在为一个节日建立这个网站，我需要用过滤器制作图像库。我希望画廊有一个masonryl布局，所以我使用了这个网站的插件http://masonry.desandro.com/ 一切都按照我的意愿运作，但是当我过滤隐藏的图像时，隐藏的图像会在显示的图像之间留下黑色空间，我希望它们再次在漫画布局中重新组织。那可能吗？所以，这是我的HTML，以防你想看看

<div id="contentor">

    <div class="cartaz dia14">

        <div class="filterList">

            <ul>
                <li class="meo">
                    <a>Stage MEO</a>
                </li>

                <li class="santa">
                    <a>Stage Santa Casa</a>
                </li>

                <li class="moche">
                    <a>Stage Moche Room</a>
                </li>

            </ul>

        </div>

        <div class="grid">

            <div class="grid-sizer"></div>

            <div class="grid-item santa"></div>

            <div class="grid-item grid-item--height3 meo"></div>

            <div class="grid-item grid-item--height2 moche"></div>

            <div class="grid-item santa"></div>

            <div class="grid-item santa"></div>

            <div class="grid-item grid-item--height3 meo"></div>

            <div class="grid-item grid-item--height2 moche"></div>

            <div class="grid-item moche"></div>

        </div>

    </div>

</div>

我也会离开CSS（网站是全宽的，这就是为什么每个宽度都在％上）

    .cartaz {
        clear: both;
    }

    .grid {
        width: 58.8%;
        float: right;
        margin-right: 7.1%;
        margin-top: 80px;
        margin-bottom: 80px;
        z-index: 2
    }

    .grid:after {
        content: '';
        display: block;
        clear: both;
    }

    .grid-sizer,
    .grid-item {
        width: 46%;
    }

    .grid-item {
        height: 250px;
        float: left;
        background: #D26;
        overflow: hidden;
        margin-bottom: 25px;
        margin-left: 4.06%;
    }

    .grid-item--height2 {
        height: 300px;
    }

    .grid-item--height3 {
        height: 350px;
    }

    .filterList {
        margin-left: 7.1%;
        margin-top: 200px;
        float: left;
        z-index: 5;
    }

    .filterList ul {
        padding: 0;
    }

    .filterList li {
        font-family: Ubuntu;
        font-size: 19px;
        font-weight: 100;
        color: #324e5c;
        line-height: 50px;
        list-style: none;
}

这是.js

   <script>
        $('.grid').masonry({
            itemSelector: '.grid-item'
            , percentPosition: true
            , resize: false
        , });
    </script>

    <script>
        $(".dia14 .filterList li").on("click", function () {

            var myClass = $(this).attr("class");

            if ($(".dia14 .grid .grid-item." + myClass).is(":visible")) {

                $(".dia14 .grid .grid-item").not('.' + myClass).each(function () {
                    if ($(this).is(":visible")) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });

            } else {

                $(".dia14 .grid .grid-item." + myClass).show();

                $(".dia14 .grid .grid-item").not('.' + myClass).each(function () {
                    if ($(this).is(":visible")) {
                        $(this).hide();
                    }

                });

            }
        });
    </script>

有人可以帮帮我吗？希望你们明白我的意思！

带有过滤器

0 个答案: