響應式過濾圖庫P

Question

在過去的幾個月中，我一直在自學Web開發，並且一直在為我的攝影作品創建作品集網站。 我非常接近實現我想要的目標，這是一個響應式跨設備篩選圖像庫。
在大多數情況下，它可以工作，但有一個問題除外：在移動設備上看起來不錯，但在大屏幕上卻不行。

出於說明目的，這里是站點，因為文件已經在托管服務器上。

如您所見，站點和畫廊的加載情況很好，“顯示全部”類別最初處於活動狀態。 通過類別進行過濾也可以，並且在移動設備上，圖像疊放起來很好，除了寬度在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方法設置了按鈕，但這又重新加載了整個類別及其各自的圖像，從而導致加載速度變慢。 有了這個，我認為它應該是一次負載，逼近過濾器。 這種方法聽起來是否連貫/高效，還是應該尋找其他替代方法？

Answer 1

當前，您具有“ 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）。