响应式过滤图片库 P答案

【问题标题】：Responsive Filtering Image Gallery P响应式过滤图片库 P
【发布时间】：2018-06-19 13:11:02
【问题描述】：

在过去的几个月里，我一直在自学 Web 开发，并且一直致力于为我的摄影作品创建一个作品集网站。我非常接近实现我所寻找的，这是一个响应式跨设备过滤图片库。
在大多数情况下，它可以工作，除了一个问题：它在移动设备上看起来不错，但在大屏幕上却不行。

For illustrative purposes, here is the site, since files are already on hosting server.

如您所见，网站和图库加载正常，“显示全部”类别最初处于活动状态。过滤类别也很有效，在移动设备上，图像堆叠得很好，除了宽度为 500 像素及以上的图像，如旋转的手机/平板电脑屏幕或最大化的窗口。我一直在使用不同的 css 属性来解决这个问题，但我根本无法弄清楚这一点。
为了能够复制问题，必须在大屏幕设备/最大化窗口上按下过滤按钮。

画廊代码是这样设置的（我省略了我认为不必要的，例如php包含/导航/等）：

    filterSelection("all")

    function filterSelection(c) {
        // console.log("filterSelection function " + c);
        let images, i;
        images = document.getElementsByClassName("img ");
        // console.log(images);
        // console.log(c);
        if (c == "all") {
            c = "";
        }
        for (i = 0; i < images.length; i++) {
            removeClass(images[i], "show");
            if (images[i].className.indexOf(c) > -1) {
                addClass(images[i], "show");
            }
        }
    }

    function addClass(element, name) {
        // console.log("addClass function");
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        // console.log(element);
        arr2 = name.split(" ");
        // console.log(name);
        for (i = 0; i < arr2.length; i++) {
            if (arr1.indexOf(arr2[i]) == -1) {
                // console.log(element.className);
                element.className += " " + arr2[i];
                // console.log(element.className);

            }
        }
    }

    function removeClass(element, name) {
        // console.log("removeClass function");
        var i, arr1, arr2;
        arr1 = element.className.split(" ");
        arr2 = name.split(" ");
        // console.log("arr1" + arr1);
        // console.log("arr2" + arr2);
        for (i = 0; i < arr2.length; i++) {
            while (arr1.indexOf(arr2[i]) > -1) {
                arr1.splice(arr1.indexOf(arr2[i], 1));
            }
        }
        element.className = arr1.join(" ");
        // console.log("element " + arr1);
    }

    var catButtons = document.getElementById("catButtons");
    var buttons = catButtons.getElementsByClassName("btn-dark");
    // console.log("buttons " + buttons);
    // console.log(buttons);
    // console.log("catButtons " + catButtons);
    // console.log(catButtons);
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", function () {
            var current = document.getElementsByClassName("btn-dark active");
            current[0].className = current[0].className.replace(" active", "");
            this.className += " active";
            // console.log("current ");
            // console.log(current);
        });
    }

body {
    background-color: black;
}

h1,
footer {
    color: white;
    text-align: center;
}

div.gallery img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    border-style: inset;
    border-width: medium;
    border-color: #ccc;
}
div .gallery{
    /* float:left; */
    display:grid;
    float:none;
    flex-direction: row;
}

.wrapper{
    overflow:hidden;
}

/* .wrapper:after{
    /* content: "";
    display: block;
    clear: both; 
} */

div .gallery img:hover {
    border-radius: 15px;
    border-style: inset;
    border-width: medium;
    border-color: #555;
}

div .desc {
    padding: px 10px 10px 0px;
    text-align: right;
    color: white;
}

.vertical-align {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0px;
}
.vertical-align:after{
    content: "";
    display: block;
    clear: both;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px 6px 0;
    float: left;
    width: 24.99999%;
    display: none;
}

/* TODO: divide into 3
@media only screen and (max-width: 750px){
    .responsive{
        width:40%;
        margin: 6px 0;
    }
} */

/* MEDIA QUERIES RESPONSIVE GALLERY */

@media only screen and (max-width: 900px) {
    .responsive {
        width: 50%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 99.99999%;
    }
}

/* FANCYBOX THUMBS BOTTOM PLACEMENT */
.fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 95px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
}

.fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
}

/* FANCY BOX WATERMARK */

.fancybox-slide.watermark .fancybox-spaceball {
    background-image: url('https://fancyapps.com/GJbkSPU.png');
    background-size: cover;
    background-repeat: no-repeat;
}

/* CATTEGORY BUTTONS */
#centerButtons{
    display:block;
    text-align: center;

}

.btn-dark {
    color: #ffffff;
    background-color: #333333;
    border-color: white;
    border-radius: 3px;
}

.btn-dark:focus,
.btn-dark:hover,
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
    color: #ffffff;
    background-color: black;
    border-color: #444;
}

.show {
    display: block !important;
}

/* !CATEGORY BUTTONS */

/* TMP WORKING  -- FANCYBOX MEDIA QUERY BOTTOM THUMBS */

/* @media all and (min-width: 800px) {
    .fancybox-thumbs {
        top: auto;
        width: auto;
        bottom: 0;
        left: 0;
        right : 0;
        height: 95px;
        padding: 10px 10px 5px 10px;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.3);
      }
      
      .fancybox-show-thumbs .fancybox-inner {
        right: 0;
        bottom: 95px;
      }  
} */

<!-- Gallery Wrapper -->
<div class="wrapper">
    <div class="vertical-align col-lg-12">
        <div class="responsive img cityscapes">
            <div class="gallery">
                <a href="images/photography/fres/lions_gate.jpg" data-fancybox="images" data-type="image" data-width="1280" data-height="854">
                    <img class="" src="images/photography/thumbs/lions_gate.jpg" />
                </a>
                <div class="desc">Description</div>
            </div>
        </div>
        <div class="responsive img landscapes">
            <div class="gallery">
                <a href="images/photography/fres/burnaby_mountain.jpg" data-fancybox="images" data-type="image" data-width="1280" data-height="854">
                    <img class="" src="images/photography/thumbs/burnaby_mountain.jpg" />
                </a>
                <div class="desc">Description</div>
            </div>
        </div>
        <div class="responsive img cityscapes">
            <div class="gallery">
                <a href="images/photography/fres/burrard_bridge.jpg" data-fancybox="images" data-type="image" data-width="1280" data-height="854">
                    <img class="" src="images/photography/thumbs/burrard_bridge.jpg" />
                </a>
                <div class="desc">Description</div>
            </div>
        </div>
        <div class="responsive img cityscapes">
            <div class="gallery">
                <a href="images/photography/fres/vancity.jpg" data-fancybox="images" data-type="image" data-width="1280" data-height="485">
                    <img class="" src="images/photography/thumbs/vancity.jpg" />
                </a>
                <div class="desc">Description</div>
            </div>
        </div>
    </div>
    <div class="vertical-align col-lg-12">
        <div class="responsive img cityscapes">
            <div class="gallery">
                <a href="images/photography/fres/vancity.jpg" data-fancybox="images" data-type="image" data-width="1280" data-height="485">
                    <img class="" src="images/photography/thumbs/vancity.jpg" />
                </a>
                <div class="desc">Description</div>
            </div>
        </div>
        <div class="responsive img landscapes">
            <div class="gallery">
                <a href="images/photography/fres/burnaby_mountain.jpg" data-fancybox="images" data-type="image" data-width="1280" data-height="854">
                    <img class="" src="images/photography/thumbs/burnaby_mountain.jpg" />
                </a>
                <div class="desc">Description</div>
            </div>
        </div>
        <div class="responsive img cityscapes">
            <div class="gallery">
                <a href="images/photography/fres/burrard_bridge.jpg" data-fancybox="images" data-type="image" data-width="1280" data-height="854">
                    <img class="" src="images/photography/thumbs/burrard_bridge.jpg" />
                </a>
                <div class="desc">Description</div>
            </div>
        </div>
        <div class="responsive img animals">
            <div class="gallery">
                <a href="images/photography/fres/eagle.jpg" data-fancybox="images" data-type="image" data-width="1280" data-height="823">
                    <img class="" src="images/photography/thumbs/eagle.jpg" />
                </a>
                <div class="desc">Description</div>
            </div>
        </div>
    </div>
</div>

如果可能的话，我想就如何解决这个问题提出一些建议，如果可能的话，考虑到我将每行设置为包含 4 张照片的方式。

此外，一旦我的布局正常工作，我想通过 PHP 查询到包含位置和其他图像详细信息（如标题等）的站点数据库，自动完成画廊的初始填充。我最初使用 PHP 查询和 POST 方法设置了按钮，但这会再次加载整个类别及其各自的图像，从而导致加载速度变慢。有了这个，我认为它应该是一次加载，在接近后过滤。这种方法听起来连贯/有效，还是我应该寻找其他替代方案？

【问题讨论】：

所以问题是，在更大的屏幕上，如果您按“风景”进行过滤，两张照片会出现在不同的行上，您是否希望它们彼此并排出现在同一行上？
@emmzee 感谢您的回复，这是正确的。为了更好地可视化它，我认为城市景观过滤器更好地说明了这个问题，在同一行中，图像应该在的 div 之间存在块。但是，是的，理想情况下，正如您提到的，我希望它们彼此相邻。

标签： javascript php html css responsive

【解决方案1】：

目前，您有两个单独的 div 与“col-lg-12”类，一个用于第一行，第二个用于第二行。这些 div 中的每一个都填充了 100% 的视口。因此，如果您删除一些内部“响应式 img”div，剩余的图像将保持分割状态。

您可以做的是将所有“响应式 img”div 放在一个包含“col-lg-12”的 div 中。如果超过四个，他们就会被撞倒。此处的文档中对此进行了说明，即使您没有对图像使用 Bootstrap 列，它也应该可以正常工作，同样的原则适用： https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping

关于你的第二个问题，它是否有效取决于你加载了多少张照片。比如说一打，一次加载它们是合理的。如果您得到的不止这些，您可能需要考虑一次加载一个页面并设置某种分页，例如： https://getbootstrap.com/docs/3.3/components/#pagination

通过 AJAX 按照您的说明即时加载图像，或重新加载页面（例如，photography.php?page=2）。

【讨论】：

完美。几乎解决了我一直在寻找的一切 - 非常有用的链接。非常感谢您的详细回复和帮助！