慢加载+瀑布图

最新推荐文章于 2024-08-26 20:25:07 发布

Whnist

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量378

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Meg_Fu/article/details/128666832

版权

内容
多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示20-30张图片。
原理
不同大小图实现瀑布效果
用if判断轮动距离实现对字标签的增加
代码

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
	<style>
	*{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    ul,li{
        list-style:none;
    }
    #list{
        width: 100%;
        margin: 0 auto;
        flex-direction: row;
        column-gap: 5px;
        column-count: 6;  /* 6列 */
        background-color: antiquewhite;
    }
    #list #list li img{
        width: 180px;
        display: block;
        margin: 0;
        padding: 0;
    }
    #list li{
        padding: 10px 0;
    }
	</style>
</head>
<body>
    <div>
        <ul id="list">
            <li><img src="./imgs/a.jpg" alt=""></li>
            <li><img src="./imgs/b.jpg" alt=""></li>
            <li><img src="./imgs/c.jpg" alt=""></li>
            <li><img src="./imgs/d.jpg" alt=""></li>
            <li><img src="./imgs/e.jpg" alt=""></li>
            <li><img src="./imgs/f.jpg" alt=""></li>
            <li><img src="./imgs/g.jpg" alt=""></li>
            <li><img src="./imgs/h.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        var arr=[{
            url:"./imgs/a.jpg"
        },
        {
            url:"./imgs/b.jpg"
        },
        {
            url:"./imgs/c.jpg"
        },
        {
            url:"./imgs/d.jpg"
        },
        {
            url:"./imgs/e.jpg"
        },
        {
            url:"./imgs/f.jpg"
        },
        {
            url:"./imgs/g.jpg"
        },
        {
            url:"./imgs/h.jpg"
        }]
        renderHTML(arr)
        function renderHTML(arr) {
            for(var i=0;i<arr.length;i++){
                var list = document.createElement("UL")
		        var oli = document.createElement("li")
		        oli.innerHTML = `<img src="${arr[i].url}" alt="">` //让li绑定图片
		            list.appendChild(oli) //增加子标签
                    document.getElementById("list").appendChild(list);
	        }
        }
        isLoading = false
	    window.onscroll = function(){
		    var listHeight = list.offsetHeight//绑定
		    var listTop = list.offsetTop
        
		    var scrollTop = document.documentElement.scrollTop 
		    var windowHeight = document.documentElement.clientHeight
		    if(isLoading) return
		    if((listHeight+listTop)-Math.round(windowHeight+scrollTop)<50){ //计算滚动距离
			    isLoading = true
			
		        setTimeout(function(){ //渲染下一页数据
			        renderHTML(arr)
			        isLoading = false //下一次继续触发到底事件
		        },1000)
            }
        }
    </script>
</body>
</html>

效果

1673530513422

Whnist

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
慢加载+瀑布图

多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示20-30张图片。用if判断轮动距离实现对字标签的增加。//下一次继续触发到底事件。不同大小图实现瀑布效果。
复制链接

扫一扫