操作方法 - 图片网格

了解如何创建图片网格。

图片网格

了解如何通过单击按钮创建在四个、两个或全角图片之间变化的图片库：

创建图片网格

步骤1）添加HTML：

示例

步骤2）添加CSS：

使用 CSS Flexbox 创建布局：

示例

.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
vertical-align: middle;
}

亲自试一试 »

步骤 3) 添加 JavaScript：

使用 JavaScript 创建可控网格视图：

示例

<button onclick="one()">1</button>
<button onclick="two()">2</button>
<button onclick="four()">4</button>

<script>
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// Declare a "loop" variable
var i;

// Full-width images
function one() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "100%";
  }
}

// Two images side by side
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "50%";
  }
}

// Four images side by side
function four() {
for (i = 0; i < elements.length; i++) {
    elements[i].style.flex = "25%";
  }
}
</script>

亲自试一试 »

提示：去我们的响应式图片网格教程了解如何创建响应式图片网格，该网格在列之间有所不同，具体取决于屏幕尺寸。

提示：去我们的CSS Flexbox 教程了解有关灵活框布局模块的更多信息。