day48-Random Image Feed（随机图片显示）

50 天学习 50 个项目 - HTMLCSS and JavaScript

day48-Random Image Feed（随机图片显示）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Image Feed</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 标题 -->
    <h1>随机图片显示</h1>
    <!-- 图片容器 -->
    <div class="container"></div>

    <script src="script.js"></script>
</body>

</html>

style.css

/* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    /* 内减模式 */
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    /* 子元素竖直居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

/* 容器 */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1000px;
}

/* 图片 */
.container img {
    /* 图片覆盖宽高 */
    object-fit: cover;
    margin: 10px;
    height: 300px;
    width: 300px;
    max-width: 100%;
}

script.js

// 重点 flex  https://source.unsplash.com/random/
// Math.floor(Math.random() * (max-min+1)) + min [min,max]
// 1.获取元素节点
const container = document.querySelector('.container')//图片容器
const unsplashURL = 'https://source.unsplash.com/random/'
const rows = 5//显示的图片行数
// 2.遍历 创建图片元素
for (let i = 0; i < rows * 3; i++) {
    const img = document.createElement('img')
    img.src = `${unsplashURL}${getRandomSize()}`
    container.appendChild(img)
}
// 获取图片的随机大小值
function getRandomSize() {
    return `${getRandomNr()}x${getRandomNr()}`
}
// 获取随机数 [300,309]
function getRandomNr() {
    return Math.floor(Math.random() * 10) + 300
}