瀑布流-

一、原生JS实现瀑布流

说明：瀑布流，图片（单模块）的宽度相等，高度不等。第二行第一个排在第一行高度最小的下面，如此类推。

css注意事项：父元素定位为relative因为子元素（单模块）需要是绝对定位（absolute）来确定位置

子元素的整个大小，不要使用margin，把所有宽度和高度都包括在单模块里面，且子元素要float left

js代码

window.onload=function () {
    waterFall('item','main');
};



function getByClass(clsName,parent) {
    var oparent;
    var items=new Array();
    if(parent){
        oparent=parent;
    }else {
        oparent=document;
    }
    var eles=oparent.getElementsByTagName('*');
    for(var i=0;i<eles.length;i++){
        if(eles[i].className===clsName){
            items.push(eles[i]);
        }
    }
    return items;
}
function waterFall(items,parent) {
    var oparent=document.getElementById(parent);
    var oitems=getByClass(items,oparent);
    console.log(oitems.length);
    //计算列数
    //首先是一个模块的宽度
    var itemW=oitems[0].offsetWidth;
    //获取浏览器宽度
    var doW=document.documentElement.clientWidth||document.body.clientWidth;
    //相除获得列数
    var cols=Math.floor(doW/itemW);
    //赋予父元素宽度;
    oparent.style.cssText="width:"+cols*itemW+"px;margin:0 auto";
    //获取每一列的高度
    var colsH=new Array();

    for(var i=0;i<oitems.length;i++){
        //获取第一行的高度
        if(i<cols){
            colsH.push(oitems[i].offsetHeight);

        }else{

            //把第二行第一张图片放在最短的第一列图片下面
            //获取第一行最短的图片
            var minH=Math.min.apply(null,colsH);//Math.min(num1,num2,num3)但是我们是直接是数组，所以用apply（this对象，xxxx)
          /*  console.log(minH);*/
            //获取这张图片的index
            var index=getImgIndex(minH,colsH);
            //根据上述获取的值，设置这一个模块的top和left
            oitems[i].style.position="absolute";
            oitems[i].style.left=itemW*index+'px';
            oitems[i].style.top=minH+'px';
            colsH[index]+=oitems[i].offsetHeight;
            console.log(colsH[index]);
        }

    }


}
function getImgIndex(Hei,HArr) {
    for(var i=0;i<HArr.length;i++){
        if(HArr[i]===Hei){
            return i;
        }
    }
}
var minH=Math.min.apply(null,colsH);//Math.min(num1,num2,num3)但是我们是直接是数组，所以用apply（this对象，xxxx)
          /*  console.log(minH);*/
            //获取这张图片的index
            var index=getImgIndex(minH,colsH);
            //根据上述获取的值，设置这一个模块的top和left
            oitems[i].style.position="absolute";
            oitems[i].style.left=itemW*index+'px';
            oitems[i].style.top=minH+'px';
            colsH[index]+=oitems[i].offsetHeight;
            console.log(colsH[index]);
        }

    }


}
function getImgIndex(Hei,HArr) {
    for(var i=0;i<HArr.length;i++){
        if(HArr[i]===Hei){
            return i;
        }
    }
}

css代码：

 

div,img{
    margin:0;
    padding:0;
}
#main{
    position: relative;
    margin:0 auto;

}
.item{
    float: left;
    padding:15px 0 0 15px;/*在左边和上边设置15pxpadding*/
}
.pic{
    padding:10px;
    border:1px solid #ccc;
    border-radius:5px;
    box-shadow: 0 0 5px #ccc;
}
.pic img{
    width:165px ;
    height:auto;
}

 

div,img{
            margin:0;
            padding:0;
        }
        #main{
            position: relative;
            margin:0 auto;

        }
        .item{
            float: left;
            padding:15px 0 0 15px;/*在左边和上边设置15pxpadding*/
        }
        .pic{
            padding:10px;
            border:1px solid #ccc;
            border-radius:5px;
            box-shadow: 0 0 5px #ccc;
        }
        .pic img{
            width:165px ;
            height:auto;
        }

 

html代码

 

<div id="main">
        <div class="item">
            <div class="pic">
                <img class="img" src="images/shijian13.png">
            </div>
        </div>
</div>

二、onscroll加载数据

1）蓝条：当顶部距离最后一个单模块一半距离即====》最后模块距顶（offsetTop）+offsetHeight/2

2）黑条：浏览器底部到达最后一个单模块的中心====》滚动条滚动的距离+浏览器高度

当蓝条<黑条，即到达触发条件~可以加载新的图片

//判断是否触发加载数据的条件
function checkScroll(items,parent) {
    var oparent=document.getElementById(parent);
    var oitems=getByClass(items,oparent);
    var lastItem=oitems[oitems.length-1];
    //蓝条：当顶部距离最后一个单模块一半距离即====》最后模块距顶（offsetTop）+offsetHeight/2
    var lastItemH=lastItem.offsetTop+Math.floor(lastItem.offsetHeight/2);
    //滚动的距离
    var scrollH=document.documentElement.scrollTop||document.body.scrollTop;
    //浏览器高度
    var clientWidth=document.documentElement.clientHeight || document.body.clientHeight;

    //黑条：浏览器底部到达最后一个单模块的中心====》滚动条滚动的距离+浏览器高度
    //当蓝条<黑条，即到达触发条件~可以加载新的图片
    if(lastItemH<=(scrollH+clientWidth)){
        return true;
    }else {
        return false;
    }
}

window.onload=function () {
    waterFall('item','main');
    window.onscroll=function (ev) {
        var dataInt={
          "data":[
              {
                "src":'0.jpg'
              },
              {
                  "src":'1.jpg'
              },
              {
                  "src":'2.jpg'
              },
              {
                  "src":'3.jpg'
              },
              {
                  "src":'4.jpg'
              },
              {
                  "src":'5.jpg'
              },
              {
                  "src":'6.jpg'
              },
              {
                  "src":'7.jpg'
              },
              {
                  "src":'8.jpg'
              }

          ]
        };
        if(checkScroll('item','main')){
            //将数据块渲染到当前页面
            var parent=document.getElementById('main');
            for(var i=0;i<dataInt.data.length;i++){
                var oItem=document.createElement('div');
                oItem.className='item';
                parent.appendChild(oItem);
                var oPic=document.createElement('div');
                oPic.className='pic';
                oItem.appendChild(oPic);
                var oImg=document.createElement('img');
                oImg.src="images/"+dataInt.data[i].src;
                oImg.className='img';
                oPic.appendChild(oImg);
                waterFall('item','main');重新调用，重新瀑布流
            }
        }
    }
};waterFall('item','main');重新调用，重新瀑布流
            }
        }
    }
};

 

 

 三、jq实现瀑布流

 

 

1.获取盒子宽度：

$item.eq(0).outerWidth(),通过eq获取第1个元素，通过outerwidth()获取盒子宽度