jQuery從JSON文件中加載圖片列表內容和圖片標題，并以一行5列的方式顯示的代碼示例 畢業設計考試
以下是使用jQuery從JSON文件中加載圖片列表內容和圖片標題，并以一行5列的方式顯示的代碼示例，以及對應的JSON文件內容：
<!DOCTYPE html> <html> <head> <title>Image Gallery</title> <style> .gallery { display: flex; flex-wrap: wrap; justify-content: center; } .gallery-item { width: 20%; margin: 10px; text-align: center; } .gallery-item img { width: 100%; } .gallery-item .title { margin-top: 5px; } </style> </head> <body> <div class="gallery"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $.getJSON('images.json', function(data) { var gallery = $('.gallery'); $.each(data, function(index, image) { var galleryItem = $('<div>').addClass('gallery-item'); var img = $('<img>').attr('src', image.url); var title = $('<div>').addClass('title').text(image.title); galleryItem.append(img, title); gallery.append(galleryItem); }); }); }); </script> </body> </html>JSON文件內容（images.json）：
[ { "url": "image1.jpg", "title": "Image 1" }, { "url": "image2.jpg", "title": "Image 2" }, { "url": "image3.jpg", "title": "Image 3" }, { "url": "image4.jpg", "title": "Image 4" }, { "url": "image5.jpg", "title": "Image 5" }, { "url": "image6.jpg", "title": "Image 6" }, { "url": "image7.jpg", "title": "Image 7" }, { "url": "image8.jpg", "title": "Image 8" }, { "url": "image9.jpg", "title": "Image 9" }, { "url": "image10.jpg", "title": "Image 10" } ]在上述代碼中，我們首先創建了一個具有
.gallery類的<div>元素，用于顯示圖片列表。然后使用$.getJSON()方法從images.json文件中獲取圖片數據和標題。在回調函數中，我們使用$.each()方法遍歷每個圖片對象，并創建一個包含圖片和標題的<div>元素。然后將每個圖片元素添加到.gallery容器中。通過 CSS 樣式，我們使用
display: flex和flex-wrap: wrap來實現一行5列的布局，使圖片在一行中自動換行，并使用justify-content: center來居中對齊圖片。每個圖片元素使用.gallery-item類來設置寬度和間距，并使用.title類來設置標題的樣式。請確保將
images.json文件的路徑正確指向你的 JSON 文件，并確保 JSON 文件中的數據格式正確。同時，根據你的需求，可以修改 JSON 文件中的圖片 URL 和標題。
如果您的問題還未解決可以聯系站長付費協助。
有問題可以加入技術QQ群一起交流學習
本站vip會員 請加入無憂模板網 VIP群（50604020） PS:加入時備注用戶名或昵稱
普通注冊會員或訪客 請加入無憂模板網 技術交流群（50604130）
客服微信號：15898888535
聲明：本站所有文章資源內容，如無特殊說明或標注，均為采集網絡資源。如若內容侵犯了原著者的合法權益，可聯系站長刪除。
