练习-瀑布流

最新推荐文章于 2023-01-10 14:48:43 发布

奋斗中的切图猿

最新推荐文章于 2023-01-10 14:48:43 发布

阅读量97

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/weixin_44573096/article/details/109276542

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrap{
            width:900px;
            background-color:#ccc;
            margin:0 auto;
        }
        ul{
            margin:0;
            padding:0;
            list-style:none;
            overflow:hidden;
        }
        li{
            width:200px;
            /* height:200px; */
            background-color:rgba(255,255,0,0.3);
            float:left;
            margin-right:33px;
        }
        img{  /*不设置图片的大小的话，他就是原来的大小*/
            width:200px;
        }
        p{/*p的上下自带margin*/
            margin:0;
            line-height:30px;
            font-size:20px;
            color:#333;
        }
        li div{  /*一个div就是一个块的高，让一个块的下面有间距*/
            margin-bottom:10px;
            border-bottom:1px solid black;
        }
        li:nth-last-child(1){
            margin-right:0;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul>
            <li>
                <!-- div和img和p是我们动态创建出来的，所以得注销掉，自己创建 -->
                <!-- <div>
                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2367059193,1415540431&fm=26&gp=0.jpg" alt="">
                    <p>客服都是客观看开个口打开上开发可是对方</p>
                </div> -->
            </li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $.getJSON("data.txt",function(result){
            // console.log(result);
            // 遍历result,每遍历一个对象，就要生成一个div和p
            // for(var i=0;i<result.length;i++){
                // var oDiv=$("<div>").appendTo($("li").eq(whichLi()));   //把创建的div放在高度最矮的li的下面(如何判断哪个li的高度最矮，就得调用下面的函数了)
                // 分别创建img和p放到div里
                // $("<img>").attr("src",result[i].url).appendTo(oDiv);
                // $("<p>").html(result[i].content).appendTo(oDiv);
                // 出现问题1：所有的图片都放在了第一列的li中
                // 原因：图片的加载是需要时间的，但循环是一瞬间的，所以第一次循环结束后，我们往第一个li里放的图片还没加载（此时li的高度为0）出来就开始了第二次循环，所以第二个图片也放在第一列li的下面，永远是第0个li的高度最小，所以都放在同一列
                // 图片加载需要一定的时间，为了避免上面问题，得在第一个图片之后，外套一个onload事件，图片加载完之后（ oImg.load）
                // var oImg=null;
                // if(i!=0){  
                //     oImg.load(function(){ //如果i！=0,就得等图片加载完成之后再判断li的高度
                //         var oDiv=$("<div>").appendTo($("li").eq(whichLi())); 
                //         $("<img>").attr("src",result[i].url).appendTo(oDiv);
                //         $("<p>").html(result[i].content).appendTo(oDiv);
                //     });
                // }else{
                //     var oDiv=$("<div>").appendTo($("li").eq(whichLi())); 
                //     $("<img>").attr("src",result[i].url).appendTo(oDiv);
                //     $("<p>").html(result[i].content).appendTo(oDiv);
                // }
            // }
            var oImg=null;
            var i=0;
            var lastPic=20;
            creatPic(lastPic);     //懒加载，一次显示20个li
            $(window).on("scroll",function(){   //滚动条事件
                if(bOn){
                    if($(document).scrollTop()+document.documentElement.clientHeight>$("li").eq(whichLi()).outerHeight()){
                        bOn=false;
                        lastPic+=15;     //找到最矮的li在它下面一次加15张图片，但不能超过数组的长度
                        if(lastPic>result.length){
                            lastPic=result.length;
                            // 说明把所有的图片都加载完了，所以就要关闭鼠标滚动事件
                            $(window).off("scroll");
                        }
                        creatPic(lastPic);
                    }
                }
            });
            function creatPic(n){
                var oDiv=$("<div>").appendTo($("li").eq(whichLi())); 
                oImg=$("<img>").attr("src",result[i].url).appendTo(oDiv);
                $("<p>").html(result[i].content).appendTo(oDiv);
                i++;
                oImg.load(function(){
                    if(i<n){
                        creatPic(n);   //递归
                    }else{   //图片没加载完就不开开关（一直递归，等图片加载完），加载完了就开开关
                        bOn=true;
                    }
                })
            }
        });
        // 判断哪个li是最矮的li，然后返回最矮li的下标
        function whichLi(){
            var arr=[];
            $("li").each(function(){
                arr.push($(this).outerHeight());
            });
            // var heightMin=arr.sort((a,b)=>a-b)[0];   //将数组从小到大排序，然后拿出第一个就是最小的给heightMin
            // return arr.indexOf(heightMin);
            // 上面代码是产生问题1的原因。因为arr.sort改变了原数组，然后取数组的第一个数据，取出来的永远是第一个，所以接下来的图片会放到第一个li的下面。用深拷贝解决:
            var arr2=Array.from(arr);
            var heightMin=arr2.sort((a,b)=>a-b)[0];
            return arr.indexOf(heightMin);
        }
        console.log(whichLi());
    </script>
</body>
</html>

奋斗中的切图猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习-瀑布流

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #wrap{
复制链接

扫一扫