demo03 waterfall flow layout
need
- When the mouse is not over the picture, the carousel will be performed automatically, and the left and right arrows will not be displayed; when > the mouse is placed over the picture, the carousel will be stopped, and the left and right arrows will be displayed;
- After the picture is switched, the small dots at the bottom of the picture will switch at the same time, and click the corresponding small dot to switch to the corresponding picture;
- Click the left and right arrows to switch between the left and right pictures;
- The text that needs to be introduced on the picture will be switched along with the picture switching.
train of thought
Set up six div tags, and add a new effect to one of the div imports.
The rest of the pictures can be loaded when the mouse is pulled down.
Call the generator function to load
. When the page load is completely loaded, the timing will end
the code
<!DOCTYPE html>
<html lang="zh-CN" xml:lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是网页标题</title>
<meta name="description" content="内容描述" />
<meta name="keywords" content="关键字" />
<meta name="robots"content="none">
<meta name="author"content="jinhao">
<meta name="generator"content="vsCode"/>
<link rel="stylesheet" href="">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon " href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./demo01.css">
<style>
body,html{
height: 100%;
}
.container{
width: 100%;
display: flex;
justify-content: space-between;
}
.yan{
height: fit-content;
flex: 1;
display: flex;
flex-direction: column;
margin: 10px;
}
.yan :nth-child(odd){
margin: 10px;
}
.yan :nth-child(even){
margin: 10px;
}
.yan img{
width: 100%;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="yan yan1"></div>
<div class="yan yan2"></div>
<div class="yan yan3"></div>
<div class="yan yan4"></div>
<div class="yan yan5"></div>
<div class="yan yan6"></div>
</div>
<script>
const data =[
{
url:'1.jpg'},{
url:'1.jpg'},
{
url:'2.jpg'},{
url:'2.jpg'},
{
url:'3.jpg'},{
url:'3.jpg'},
{
url:'4.jpg'},{
url:'4.jpg'},
{
url:'5.jpg'},{
url:'5.jpg'},
{
url:'6.jpg'},{
url:'6.jpg'},
{
url:'7.jpg'},{
url:'7.jpg'},
{
url:'8.jpg'},{
url:'8.jpg'},
{
url:'9.jpg'},{
url:'9.jpg'},
{
url:'10.jpg'},{
url:'10.jpg'},
{
url:'11.jpg'},{
url:'11.jpg'},
{
url:'12'},{
url:'12.jpg'},
{
url:'13.jpg'},{
url:'13.jpg'},
{
url:'14.jpg'},{
url:'14.jpg'},
{
url:'15.jpg'},{
url:'15.jpg'},
{
url:'16.jpg'},{
url:'16.jpg'},
{
url:'17.jpg'},{
url:'17.jpg'},
{
url:'18.jpg'},{
url:'18.jpg'},
{
url:'19.jpg'},{
url:'19.jpg'},
{
url:'20.jpg'},{
url:'20.jpg'}
]
//声明并存入图片进数组中
const yan = [...document.querySelectorAll('.yan')] //声明每一列并将每列的数组在语法层展开
const container = document.querySelector('.container')
const yan1 = document.querySelector('.yan1')
const yan2 = document.querySelector('.yan2')
const yan3 = document.querySelector('.yan3')
const yan4 = document.querySelector('.yan4')
const yan5 = document.querySelector('.yan5')
const yan6 = document.querySelector('.yan6')
//设置内部图像盒子高度函数并返回其值
function autoHeight(){
return[yan1.clientHeight,yan2.clientHeight,yan3.clientHeight,
yan4.clientHeight,yan5.clientHeight,yan6.clientHeight]
}
function showItem(){
let arrHeight = autoHeight() //获取图像盒子高度
let index = arrHeight.indexOf(Math.min(...arrHeight)) //返回所有盒子高度最小值赋值给index
return index
let heightArr = []
heightArr[index] += data[i].offsetHeight
}
function* upload(){
//调用生成器函数，实现加载功能
for(let i = 0; i < data.length;i++){
let minItem = showItem() //获取最小盒子高度
let img = document.createElement('img') //创建图片
img.src = data[i].url //调取图片
yan[minItem].appendChild(img) //在最小高度盒子优先添加新的图片节点
yield minItem //迭代器返回最小高度盒子
}
}
let initial = 0
window.onload = function(){
//设置窗口加载后执行函数
let alter = upload() //声明迭代函数
let interval = setInterval(()=>{
if(initial>data.length){
clearInterval(interval) //判断此时是否大于所给数据长度，若是则清除加载的0.1秒定时，否则继续
return
}
initial++
alter.next()
},100)
}
</script>
</html>