javascript - 构建一个画廊，在选择按钮时隐藏图像。它可以工作，但不会在页面加载时显示所有图像

Question

当您单击“显示全部”按钮时，会出现图像，但我需要它们在页面加载时显示。当我从我的 css 中删除“显示:无”时，它会中断并且按钮不再起作用。我试过删除事件按钮类和“显示”类。此代码是从 w3 学校获取的，我已尝试尽可能多地复制它，但无法在页面加载时显示所有内容。

引用网址:http://www.barbarabielpainting.com/new/

        <div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('1')"> 1</button>
  <button class="btn" onclick="filterSelection('2')"> 2</button>
  <button class="btn" onclick="filterSelection('3')"> 3</button>
</div>

        <div class="row">

            <div class="col-sm-6 col-md-4 all column 1">
                <div class="thumbnail">
                    <a class="lightbox" href="img/paintings/1.jpg">
                        <img src="img/paintings/1.jpg" alt="Park">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 all column 2">
                <div class="thumbnail">
                    <a class="lightbox" href="img/paintings/2.jpg">
                        <img src="img/paintings/2.jpg" alt="Bridge">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 all column 3">
                <div class="thumbnail">
                    <a class="lightbox" href="img/paintings/3.jpg">
                        <img src="img/paintings/3.jpg" alt="Tunnel">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide columns by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.btn.active {
  background-color: #666;
   color: white;
}

.active {
    display: block;
}

filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  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 < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -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 < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Answer 1

函数filterSelection(parameter)添加了show类，这个类有一个display:block属性。因此，删除 display: none 不起作用，因为所有图像都已经有 display: block。

您可以添加此 JavaScript 以将 show 类添加到每个 div:

window.onload(){
  filterSelection("all");
}

或者，您可以将类 show 单独添加到每个 div。