自己写个瀑布流遇到了问题

首先贴代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main1, #main2, #main3 {
            float: left;
            width: 280px;
            margin-right: 10px;
            margin-left: 100px;
        }

        .box {
            position: relative;
            padding: 5px;
            border: 1px solid deeppink;
            background: pink;
            margin-bottom: 5px;
            animation: abvc 0.5s 1;

        }

        .box span {
            color: white;
            text-align: center;
            font-size: 18px;
            font-weight: 800;
            position: absolute;
            bottom: 10px;
            width: 270px;
            display: block;
            background: rgba(0, 0, 0, 0.3);
        }

        .box img {
            width: 100%;
            height: auto;
        }

        @keyframes abvc {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
        window.onload = function () {
            window.onscroll = function () {
                addimg()
            }
        };
        var num = 1;
        var data = [{src: "one.jpg", title: "文字1"},
            {src: "two.jpg", title: "文字2"},
            {src: "three.jpg", title: "文字3"},
            {src: "four.jpg", title: "文字4"},
            {src: "five.jpg", title: "文字5"},
            {src: "six.jpg", title: "文字6"},
            {src: "seven.jpg", title: "文字7"},
            {src: "eight.jpg", title: "文字8"},
            {src: "nine.jpg", title: "文字9"},
            {src: "ten.jpg", title: "文字10"},
            {src: "eleven.jpg", title: "文字11"},
            {src: "twlve.jpg", title: "文字12"},
            {src: "thirteen.jpg", title: "文字13"},
            {src: "fourteen.jpg", title: "文字14"},
            {src: "fifteenteen.jpg", title: "文字15"},
            {src: "sixteen.jpg", title: "文字16"},
            {src: "seventeen.jpg", title: "文字17"},
            {src: "eighteen.jpg", title: "文字18"},
            {src: "ninteen.jpg", title: "文字19"},
            {src: "twenty.jpg", title: "文字20"},
            {src: "onea.jpg", title: "文字21"},
            {src: "oneb.jpg", title: "文字22"},
            {src: "onec.jpg", title: "文字23"},
            {src: "oned.jpg", title: "文字24"}

        ];

        function addimg() {

            var clienth1 = $("#main1 .box:last").offset().top - $(window).scrollTop() - $("#main1 .box:last").outerHeight();
            var clienth2 = $("#main2 .box:last").offset().top - $(window).scrollTop() - $("#main2 .box:last").outerHeight();
            var clienth3 = $("#main3 .box:last").offset().top - $(window).scrollTop() - $("#main3 .box:last").outerHeight();
            if (clienth1 <= 132 || clienth2 <= 132 || clienth3 <= 132) {
                for (var i = 0; i < 4; i++) {
                    var div = '<div><img src="imgs/' + data[isnum()].src + '" alt="#"/><span>' + data[isnum()].title + '</span></div>';
                    $("#main" + i).append(div)
                }
            }
        }

        function isnum() {
            if (num > data.length - 1) {
                num = 0;
            }
            return num++;
        }


    </script>
</head>
<body>
<div id="pbl">
    <div id="main1">
        <div class="box">
            <img src="imgs/two.jpg" alt="#"/>
            <span>内容内容内容</span>
        </div>
        <div class="box">
            <img src="imgs/one.jpg" alt="#"/> <span>内容内容内容</span>
        </div>
        <div class="box">
            <img src="imgs/three.jpg" alt="#"/> <span>内容内容内容</span>
        </div>
        <div class="box">
            <img src="imgs/eleven.jpg" alt="#"/> <span>内容内容内容</span>
        </div>
        <div class="box">
            <img src="imgs/ten.jpg" alt="#"/> <span>内容内容内容</span>
        </div>
        <div class="box">
            <img src="imgs/oned.jpg" alt="#"/> <span>内容内容内容</span>
        </div>
        <div class="box">
            <img src="imgs/twlve.jpg" alt="#"/> <span>内容内容内容</span>
        </div>
        <div class="box">
            <img src="imgs/thirteen.jpg" alt="#"/> <span>内容内容内容</span>
        </div>


    </div>
    <div id="main2">
        <div class="box">
            <img src="imgs/four.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/five.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/six.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/fourteen.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/fifteen.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/sixteen.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/seventeen.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/eighteen.jpg" alt="#"/>
        </div>
    </div>
    <div id="main3">
        <div class="box">
            <img src="imgs/seven.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/eight.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/nine.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/ninteen.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/twenty.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/onea.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/oneb.jpg" alt="#"/>
        </div>
        <div class="box">
            <img src="imgs/onec.jpg" alt="#"/>
        </div>
    </div>


</div>
</body>
</html>
然后效果是这样的24张图片没有无限出现，只出现这么几张，怎么办？
老子的意大利炮4333415
浏览 1534回答 0
0回答

随时随地看视频慕课网APP