demo03瀑布流布局

最新推荐文章于 2024-09-28 19:02:04 发布

yanqiu12138

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量129

点赞数

分类专栏： none 文章标签：前端 html css

本文链接：https://blog.csdn.net/yanqiu12138/article/details/128720140

版权

none 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

demo03瀑布流布局

需求
思路
代码

需求

鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当>鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相>应的小圆点可以切换到相应的图片上；
点击左右箭头可以进行左右图片的切换；
图片上需有介绍的文字，会随图片切换一起进行切换。

思路

设置六个 div标签，并将其中一个div import添加新效果
能够在鼠标下拉时加载其余的图片
调用生成器函数，进行加载
由页面加载判断完全加载完成时，结束定时

代码

<!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>