javascript搜索功能

javascript responsive css html help

itbeginner9312 2020-05-07 17:51:35 ‧ 2561 瀏覽

分享至

大大們好, 目前剛開始學習前端, 非本科系, 因為對js不太熟悉, 所以想請教大家一些問題
練習做了一個gallery的小網頁, 在搜索功能上卡關
先附上網址: https://jiashinn.github.io/thegallery/
完整程式碼 : https://github.com/jiashinn/thegallery

js程式碼:

function searchFunction() {
var input, filter, ul, li, a, i ;
input = document.getElementById("myinput");
filter = input.value.toUpperCase();
ul = document.getElementById("wrapper");
li = ul.getElementsByTagName("li");

for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}

遇到的問題是:
搜索的照片結果會占滿整個網頁,因為當初是使用grid - width=100%的排版

嘗試將搜索到的結果改成style.width=**,
但原本最初的設定就跑掉了

故鄉請教大大們, 請問可以用甚麼方式解決這個問題呢(讓搜索到的照片可以是響應式的)? 希望可以解開小女的疑惑,感激不盡!!!!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

咖咖拉

iT邦好手 1 級 ‧ 2020-05-07 19:00:46

最佳解答

這是 grid 特性的問題

對grid沒太深研究不過你把 ul#wrapper
css改成以下這段因該就是你要的了

ul#wrapper {
    list-style: none;
    margin-top: 50px;
    text-align: center;
    display: grid;
    /* grid-template-columns: repeat(5, auto); */
    grid-gap: 2vmin;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}