Question

我正在创建自己的作品集网站，并为各节添加了Javascript内容过滤器，但是我不知道如何在其中响应缩略图。

我希望它的性能就像在Bootstrap列中一样，在大屏幕上堆叠4个，在桌面上堆叠3个，在移动设备上每行堆叠1个。

意识到设置宽度会覆盖响应性，但不会缩小尺寸。我试图在上面放上弹性包装纸，但无济于事。

我是否需要找到其他脚本，或者可以将其放置在其他位置？

这是网站：

Kimjensen.co.uk

感谢您提供的任何帮助！

这是CSS：

.filterDiv { 
  float: left; 
  background-color: #F9F8F7; 
  color: #ffffff; 
  width: 350px; 
  line-height: 100px; 
  text-align: center; 
  margin: 2px; 
  display: none;
   }
.centredimages { 
     display: inline-block; 
     vertical-align:middle; 
     text-align:center; 
     width: 100%; 
     height: 100%; 
     margin-bottom:25px; 
   }

.fade {
   opacity: 1; 
   transition: opacity .25s ease-in-out; 
   -moz-transition: opacity .25s ease-in-out; 
   -webkit-transition: opacity .25s ease-in-out;
   }

.wrap { flex-wrap: wrap; justify-content: center; }

以及一些HTML：

<div class="wrap">
   <div class="containerfilter">

       <div class="filterDiv design"><a href="http://kimjensen.co.uk/Foodora2" 
       target="_parent"><img class="img-responsive centredimages fade" 
       src="http://kimjensen.co.uk/FoodoraThumb19.png" /></a></div>

       <div class="filterDiv play"> <a href="http://kimjensen.co.uk/3rd- 
       Dimension" target="_parent"><img class="img-responsive centredimages 
       fade" src="http://kimjensen.co.uk/WoodenStarThumb.png" /></a></div>
   </div>
</div>

这是JavaScript：

filterSelection("all") function filterSelection(c) { 
    var x, i; 
    x = document.getElementsByClassName("filterDiv"); 

    if (c == "all") c = ""; // Add the "show" class (display:block) to the  filtered elements, and remove the "show" class from the elements  that are not selected 
  for (i = 0; i -1) 
    w3AddClass(x[i], "show"); 
   } 
  } // Show filtered elements 
  function w3AddClass(element, name) { 
   var i, arr1, arr2; 
   arr1 = element.className.split(" "); 
   arr2 = name.split(" "); 
   for (i = 0; i -1) { 
      arr1.splice(arr1.indexOf(arr2[i]), 1); } } 
   element.className = arr1.join(" "); } // Add active class to the current control button (highlight it) 
   var btnContainer = document.getElementById("myBtnContainer"); 
   var btns = btnContainer.getElementsByClassName("btn"); 
   for (var i = 0; i

使Bootstrap中的Javascript内容过滤器（随机播放）响应

0 个答案: