JavaScript图片布局：实现三行四列图片展示
<h2>使用JavaScript实现三行四列的图片展示</h2>
<p>想要在网页上以结构化的方式展示图片？本文将教你如何使用JavaScript结合CSS Grid布局，轻松实现三行四列的图片展示效果。</p>
<h3>HTML (index.html)html<!DOCTYPE html><html><head> <style> .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } </style></head><body> <div class='gallery'></div> <script src='script.js'></script></body></html></h3>
<p>这段HTML代码创建了一个名为'gallery'的div容器，并使用CSS Grid布局将其设置为四列，列间距为10px。</p>
<h3>JavaScript (script.js)javascriptdocument.addEventListener('DOMContentLoaded', function() { var gallery = document.querySelector('.gallery');</h3>
<p>// 图片URL列表 var imageUrls = [ 'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg', 'image7.jpg', 'image8.jpg', 'image9.jpg', 'image10.jpg', 'image11.jpg', 'image12.jpg' ];</p>
<p>// 创建图片元素并添加到 gallery 容器中 imageUrls.forEach(function(imageUrl) { var img = document.createElement('img'); img.src = imageUrl; gallery.appendChild(img); });});</p>
<p>这段JavaScript代码首先获取到'gallery'容器，然后遍历图片URL数组，为每个URL创建img元素，并将其添加到'gallery'容器中。</p>
<h3>如何使用</h3>
<ol>
<li>将上述HTML和JavaScript代码分别保存为'index.html'和'script.js'文件。2. 将你的图片文件与这两个文件放在同一目录下。3. 在浏览器中打开'index.html'文件，即可看到图片以三行四列的形式展示。</li>
</ol>
<h3>自定义图片</h3>
<p>你可以修改'imageUrls'数组中的图片URL，以展示你自己的图片内容。</p>
<h3>总结</h3>
<p>通过结合HTML、CSS和JavaScript，我们可以轻松实现灵活的图片布局。本例展示了如何创建三行四列的图片展示效果，你可以根据需要修改代码以实现不同的布局效果。</p>
原文地址: https://www.cveoy.top/t/topic/j49 著作权归作者所有。请勿转载和采集!