原生JS--瀑布流原理

JS部分

 window.onload = function(){
        var obox=document.getElementById("box")
        var oimgs=document.getElementsByTagName("img");
        var bodywidth=window.innerWidth;        
        var imgwidth= oimgs[0].offsetWidth;//获取图片的宽度，图片的宽度都是等宽的
        var rap=parseInt(bodywidth/imgwidth);
        var marginleft=parseInt((bodywidth-rap*imgwidth)/rap);

        function waterpull(){
            var arrimgheight=[];
            for(var i=0;i<oimgs.length;i++){
                if(i<rap){
                    oimgs[i].style.left=(imgwidth+marginleft)*i+"px";//将第一行的图片全部排列好
                    arrimgheight.push(oimgs[i].offsetHeight)//获取排列好后第一行每一张图片的高度并将它们放在一个数组中，在数组中的下标数对应它们在oimgs的下标数，我们将第一排的图片成为每一列因为之后还要在图片下面添加图片所以每一列不一定只有一张图片。
                }else{
                    var minheight=arrimgheight[0]; //设置默认的第一行的第一列的高度为最小高度
                    var index=0;//设置的默认最小高度图片的下标为index，如果不设置默认最小高度的对应下标，那么当第一列为最小高度时，下标就为上次的j
                    for(var j=0;j<arrimgheight.length;j++){
                        if(arrimgheight[j]<minheight){
                            minheight=arrimgheight[j];
                             index=j;
                        }
                    }
                    console.log(index);
                    oimgs[i].style.left=(imgwidth+marginleft)*index+"px";//让图片自动显示在第一行高度最矮的那一列的下面
                    oimgs[i].style.top=arrimgheight[index]+"px";
                    arrimgheight[index]=arrimgheight[index]+oimgs[i].offsetHeight;//更新高度最小的那一列添加图片后的实际高度即更新了第一行高度数组里的每列的高度，这样下次循环的时候就会找出最新的高度最小的那一列然后继续添加图片，更新数组每一列的高度
                    console.log(arrimgheight[index]);
                }
            }
            
        }
        waterpull();
        window.onresize=function(){
            waterpull();
        }
        window.onscroll=function(){
            if(window.innerHeight+window.pageYOffset>oimgs[oimgs.length-1].offsetTop){
                var imgDatas =[
                      'images/8.jpg',
                      'images/4.jpg',
                      'images/5.jpg',
                      'images/6.jpg',
                      'images/7.jpg',
                    ];
                for(var i=0;i<imgDatas.length-1;i++){
                    obox.innerHTML=obox.innerHTML+"<img src="+ imgDatas[i]+" class='item'>";
                }
                waterpull();
            }
        }
        }