自适应过滤图库P

时间：2018-06-19 13:11:02

标签： javascript php html css responsive

在过去的几个月中，我一直在自我学习Web开发，并且一直在为我的摄影作品创建作品集网站。我非常接近实现我想要的目标，这是一个响应式跨设备筛选图像库。
在大多数情况下，它可以工作，但有一个问题除外：它在移动设备上看起来不错，但在大屏幕上却不行。

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

如您所见，网站和画廊的加载情况很好，“显示全部”类别最初处于活动状态。通过类别进行过滤也可以，并且在移动设备上，图像叠放起来很好，除了宽度在500px及以上的那些（如旋转的手机/平板电脑屏幕或最大化的窗口中）。我一直在尝试使用不同的css属性来解决此问题，但我根本无法弄清楚。
为了能够复制问题，必须在大屏幕设备/最大化的窗口上按下过滤按钮。

这是设置画廊代码的方式（我忽略了我认为不必要的内容，例如php include / navigation / etc）：

    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张照片的方式给出建议。

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

1 个答案:

答案 0 :(得分：0)

当前，您具有“ col-lg-12”类的两个单独的div，一个用于第一行，第二个用于第二行。每个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）。

相关问题
最新问题