如何创建:图像网格
学习如何创建图像网格。
图像网格
学习如何创建一个图像画廊,只需点击按钮即可在四张、两张或全宽图像之间进行切换:
创建图像网格
第一步 - 添加 HTML:
<div class="row"> <div class="column"> <img src="wedding.jpg"> <img src="rocks.jpg"> <img src="falls2.jpg"> <img src="paris.jpg"> <img src="nature.jpg"> <img src="mist.jpg"> <img src="paris.jpg"> </div> <div class="column"> <img src="underwater.jpg"> <img src="ocean.jpg"> <img src="wedding.jpg"> <img src="mountainskies.jpg"> <img src="rocks.jpg"> <img src="underwater.jpg"> </div> <div class="column"> <img src="wedding.jpg"> <img src="rocks.jpg"> <img src="falls2.jpg"> <img src="paris.jpg"> <img src="nature.jpg"> <img src="mist.jpg"> <img src="paris.jpg"> </div> <div class="column"> <img src="underwater.jpg"> <img src="ocean.jpg"> <img src="wedding.jpg"> <img src="mountainskies.jpg"> <img src="rocks.jpg"> <img src="underwater.jpg"> </div> </div>
第二步 - 添加 CSS:
使用 CSS Flexbox 创建布局:
.row { display: flex; flex-wrap: wrap; padding: 0 4px; } /* 创建两个并排的相等列 */ .column { flex: 50%; padding: 0 4px; } .column img { margin-top: 8px; vertical-align: middle; }
第三步 - 添加 JavaScript:
使用 JavaScript 创建可控的网格视图:
<button onclick="one()">1</button> <button onclick="two()">2</button> <button onclick="four()">4</button> <script> // 获取 class="column" 的元素 var elements = document.getElementsByClassName("column"); // 声明一个“循环”变量 var i; // 全宽图像 function one() { for (i = 0; i < elements.length; i++) { elements[i].style.flex = "100%"; } } // 两张并排的图片 function two() { for (i = 0; i < elements.length; i++) { elements[i].style.flex = "50%"; } } // 四张并排的图片 function four() { for (i = 0; i < elements.length; i++) { elements[i].style.flex = "25%"; } } </script>
相关页面
教程:CSS Flexbox
教程:如何创建响应式图像网格