瀑布流实现的三种方法js jq css3

一.样式
<div id="main">
    <div class="box">
        <div class="pic">
            <img src="./images/1.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="./images/2.jpg"/>
        </div>
    </div>
</div>

#main position:relative  (子元素需要绝对定位)

box之间不能有距离（不能使用margin），否则无法定位数据块

数据块之间的距离可以通过box的padding来拉开
数据块是等宽的

二.原理
js.jq思路基本相同
首先需要两个函数，一个排版，一个渲染
排版 waterfall()
核心实现原理：先获取第一行数据块的高度,找出这行高度最小的数据块并获取此列为于第几列，下一张排在此数据块下，如此便可定位每个数据块

检测是否具备加载数据块的条件checkScrollSlide()
核心实现原理：获取当前页面最后一个元素的top，当窗口可以看见此元素高度的一半是开始加载（可自行设置），
lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
获取屏幕高度和滚动条滚动高度var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
                         var height=document.body.clientHeight  || document.documentElement.clientHeight;

比较大小，lastBoxH<scrollTop+height便可加载


监听鼠标滑动事件，满足加载条件时var oBox=document.createElement('div');
                oBox.className='box';
                oParent.appendChild(oBox);
                var oPic=document.createElement('div');
                oPic.className='pic';
                oBox.appendChild(oPic);
                var oImg=document.createElement('img');
                oImg.src='images/'+dateInt.date[i].src;
                oPic.appendChild(oImg);
创建新的节点，并渲染到页面中，最后再重新排版


三.css3实现
使用多栏布局的属性
知识点】
①column的浏览器兼容问题，不同内核要写其前缀
-webkit   Google浏览器内核
-ms       IE 
-o        欧朋opera
-moz      火狐FireFox
②column-width 和column-count没有必要同时出现
③column-rule设置列与列之间的边框
④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配《