原生js实现可点击放大的图片瀑布流动态载入相册代码-html代码-BFW代码库

原生js实现可点击放大的图片瀑布流动态载入相册代码

代码语言：html

代码描述：原生js实现可点击放大的图片瀑布流动态载入相册代码，具有视图扩展功能。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">

  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
* {
  box-sizing: border-box;
}

h1 {
  font-size: clamp(3rem, 12vw + 1rem, 20rem);
  position: fixed;
  font-family: sans-serif;
  left: 0;
  rotate: -25deg;
  translate: 5% 30%;
  top: 0;
  margin: 0;
  line-height: 0.9;
  color: hsl(0 0% 70%);
}

html {
  scroll-behavior: smooth;
  scroll-margin-top: 2rem;
}

body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
  padding: 50vh 0;
/*   background: hsl(0 0% 10%); */
}

ul {
  grid-auto-flow: dense;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 90vmin;
  list-style-type: none;
  gap: 1rem;
}

li {
  grid-column: span var(--span-x, 1);
  grid-row: span var(--span-y, 1);
}

@-webkit-keyframes enter {
  from {
    translate: 0 100%;
    scale: 0.25;
    opacity: 0.5;
  }
}

@keyframes enter {
  from {
    translate: 0 100%;
    scale: 0.25;
    opacity: 0.5;
  }
}

@-webkit-keyframes exit {
  to {
    translate: 0 -15vh;
    opacity: 0.5;
  }
}

@keyframes exit {
  to {
    translate: 0 -15vh;
    opacity: 0.5;
  }
}

button {
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
  border: 0;
  -webkit-animation: enter both ease-in-out;
          animation: enter both ease-in-out;
  animation-timeline: view();
  animation-range: entry;
  border-radius: 1rem;
}

img {
  border-radius: 1rem;
  max-width: 100%;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

li:nth-of-type(1n) {
  --span-x: 1;
  --span-y: 2;
}

li:nth-of-type(2n) {
  --span-x: 2;
  --span-y: 2;
}

li:nth-of-type(3n) {
  --span-x: 1;
  --span-y: 3;
}

li:nth-of-type(2n + 1) {
  --span-x: 1;
  --span-y: 1;
}

li.full {
  --span-x: 4;
  --span-y: 4;
}
</style>

  
  
</head>

<body translate="no">
  <h1>Scroll &<br>Tap</h1>
<ul class="grid"></ul&.........完整代码请登录后点击上方下载按钮下载查看