一.样式 <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 设置列间距,不一定定义多少,实际就显示多少。其计算规则:用当前浏览器宽口宽除以定义的列宽,剩下的距离平均分配《
瀑布流实现的三种方法js jq css3
最新推荐文章于 2023-05-29 23:38:41 发布