瀑布流

理解：瀑布流的实现方法为定位，使用绝对定位的相对定位，改变列的高度及其左边距。首先根据所有的盒模型计算一行可以放得个数，即为最终的列数，比较第一行的每个的高度，则下一行的第一个在最小高度下排列，依次循环排列至结束。（PC端）

知识点：

名称	说明
document.body.clientWidth	网页可见区域的宽度
document.body.clientHeight	网页可见区域的高度
document.body.offsetWidth	网页可见区域的宽，包含边线的宽
doucument.body.offsetHeight	网页可见区域的高，包含边线的高
document.body.scrollWidth	网页正文全文宽
document.body.scrollHeight	网页正文全文高
document.body.offsetTop	网页被卷去的高度
document.body.offsetLeft	网页被卷去的宽度
window.screenTop	网页正文部分上
window.screenLeft	网页正文部分左
window.screenWidth	屏幕分辨率宽
window.screenHeight	屏幕分辨率高
event.pageX||event.pageY	鼠标相对于页面左上边缘距离
offset（）	包含top、left属性，相对于document文档坐标
position（）	返回包含top、left属性的对象，相对于最近的元素的位置
width（）/height（）	获得或设置元素的宽高
innerWidth()/innerHeight()	获取包含内边距的元素宽高，不包含边框
outerWidth()/outerHeight()	获取整个元素的宽高，包含边框、内边距、内容
outerWidth(true)/outerHeight(true)	包含边框、内边距、内容、外边距

具体实现如下：

HTML内容：创建好多个盒模型

    <div id="waterfall">
<!--等宽不等高的模型，任意创建多个-->
<div class="box">
<img src="image/1.jpg"/>
<p>标签：风景</p>
</div>

</div>

CSS内容：注意父集元素的绝对定位，自己元素行排列float：left

JS内容：实现瀑布流布局

window.οnlοad=function(){

            var  boxArr=$(".box"),        //获取布局对象

                   num=Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),    //获取列数

                   columnHeight=[];        //定义每一列的对应高度

            //使用for循环实现

            for(var i=0;i<boxArr.length;i++){

                if(i<num){

                        //相当于第一行排列，并且计算每一行的高度

                        columnHeight[i]=$(boxArr[i]).position().top + $(boxArr[i]).outerHeight(true);

                }else{

                    //当开始第二行排列时，先找寻上一行的最低高度及其最低高度索引

                    var minHeight=columnHeight[0],    //假设第一行的最低高度为第一个元素的高度

                          index=0；                                //索引为第一个值0

                   // 开始比较找寻最小高度及其索引

                     for(var j=1;j<num;j++){

                            if(columnHeight[j]<minHeight){

                                    minHeight=columnHeight[j];

                                    index=j;

                            }

                    }

                   //设置下一个值排放的位置

                   $(boxArr[i]).css({

                        position:'absolute',

                        top:minHeight,

                        left:$(boxArr[index]).position().left

                    })

                }

                //最终的列的高度

                columnHeight[index]+=$(boxArr[i]).outerHeight(true);

            }

}

展示效果：

参考对象：

知识点：

参数	说明
outerWidth	属性为一个只读整数，声明整个窗口的宽度，IE浏览器不支持
eq(index)	返回jquery对象，只能jquery操作
get（index）	返回DOM对象，只能javaScript操作
$.each(function(index,item))	处理数组的下标，item为对象
Math.min.apply()	数组中的最小值

apply(obj,args)	劫持一个对象的方法，继承另一个对象属性，obj代替function（）类中的this对象 ; 数组，作为参数传递给Function()
$.arr(value,array,formIndex)	查找指定值数组并返回索引，若未找到返回-1；value要查找的值，array要查找的内容，formIndex数组索引值，表示从那开始查找

HTML和CSS如上所示

JavaScript如下所示：

  var boxArr = $('.box'),            //获取盒模型对象
num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),   //计算列数=可视区域宽度 / 等宽宽度 

columnHeightArr = [];     //定义每一列的高度

   boxArr.each(function(index,item){   //便利所有对象，index为下标，item为便利对象

            if(i<columnHeightArr.length){         //i<定义数组长度（计算值=num） 

                    columnHeightArr[i]=$(item).position().top + $(item).outerHeight(true);   //定义第一行

            }else{

                    //排列剩余的盒对象,找寻第一行下的高度最小的元素及其位置

                    var   minHeight=Math.min.apply(null,columnHeightArr),  //数组中的最小高度值

                            index=$.inArray(minHeight,columnHeightArr);         //数组中对应最小值的位置

                   $(item).css({

                        position:'absolute',

                        top:minHeight,

                        left:boxArr.eq(index).position.left

                })

            }

           columnHeightArr[index]+=$(item).outerHeight(true);

    })