解析瀑布流布局:JS+绝对定位的实现_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了解析瀑布流布局:JS+绝对定位的实现_javascript技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含12942字,纯文字阅读大概需要19分钟。
内容图文
绝对定位方式的瀑布流布局:一、布局
1、包围块框的容器:
... ...
2、一个块框:
3、初始化第一行/5个块框:
.pin{
padding: 15px 0 0 15px;
float: left;}
.box{
padding: 10px;
border:1px solid #ccc;}
.box img{
width:192px;
height:auto;}
效果:
二、思路:
1、设置父级main的样式:水平居中。
2、设置每个块框pin的样式:绝对定位。
3、设置窗口滚动事件的监听函数:读取数据添加块框。
JS实现:
1-①:获取父级oParent:
1-②:创建函数getClassObj()-通过父级id和块框类名-获取包含块框的数组。
var oParent=document.getElementById('main');// 父级对象
var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
var num=Math.floor(document.documentElement.clientWidth/aPin[0].offsetWidth);//获取-每行中能容纳的块框个数-num【窗口宽度除以一个块框宽度】
oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//用cssText属性为父级main添加居中样式:定宽+自动水平外边距
function getClassObj(parent,className){
var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
var pinS=[];//创建一个数组 用于存储类为className的元素
for (var i=0;i<obj.length;i++) {//遍历子集、判断类名、压入数组
if (obj[i].className==className)
pinS.push(obj[i]);
};
return pinS;}
2-①:创建数组pinHArr-用于存储每一列高度;
2-②:for语句遍历每个块框aPin[i],将前num个块框赋值给数组pinHArr,对超出一行能容纳的块框数num的块框绝对定位。
2-③:用创建函数getminHIndex()-返回一个数组中的最小值
var pinHArr=[];//用于存储 每列中的所有块框相加的高度【随着列数的不同此数组的length也随之改变】
for(var i=0;i var pinH=aPin[i].offsetHeight;//获取数组aPin的第i个块框的可见宽offsetHeight
if(i<num){//
pinHArr[i]=pinH; //第一行中的num个块框aPin 先添加进数组pinHArr
}else{
var minH=Math.min.apply(null,pinHArr);//计算数组pinHArr中的最小值minH
var minHIndex=getminHIndex(pinHArr,minH);//通过创建的getminHIndex()-获取最小值minH在数组pinHArr中的索引minHIndex
aPin[i].style.position='absolute';//设置绝对位移
aPin[i].style.top=minH+'px';
aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';//数组 最小高元素的高 + 添加上的aPin[i]块框高
pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加块框后的列高
}
}
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH)return i;
}
}
3:设置窗口滚动事件的监听函数:读取数据添加块框。
var dataInt={'data':[{'src':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};//一个临时的数据对象
//下面定义窗口滚动事件监听函数
window.onscroll=function(){
if(checkscrollside()){
var oParent=document.getElementById('main');// 父级对象
for(var i=0;i<dataInt.data.length;i++){
var oPin=document.createElement('div'); //创建添加 元素节点pin
oPin.className='pin'; //添加 类名 name属性
oParent.appendChild(oPin); //创建添加 子节点box
var oBox=document.createElement('div');
oBox.className='box';
oPin.appendChild(oBox);
var oImg=document.createElement('img');//创建添加 子节点img
oImg.src='./images/'+dataInt.data[i].src;
oBox.appendChild(oImg);
}
waterfall('main','pin');//将①②封装成函数waterfall(),将添加的节点添加到添加和定位到文档中。
};
}
function checkscrollside(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,'pin');
var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
var documentH=document.documentElement.clientHeight;//窗口高度
return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true,触发waterfall()函数
}
三、最终效果:
四、总结:此为让自己梳理一下思路,表达不太仔细连贯,仅供参考。
五、完成后的html文件和js文件:
html:index.html
</ script><br><br> <title></title><BR> <style type="text/css"><BR> *{padding: 0;margin:0;}<BR> #main{<BR> position: relative;<BR> }<BR> .pin{<BR> padding: 15px 0 0 15px;<BR> float:left;<BR> }<BR> .box{<BR> padding: 10px;<BR> border:1px solid #ccc;<BR> box-shadow: 0 0 6px #ccc;<BR> border-radius: 5px;<BR> }<BR> .box img{<BR> width:162px;<BR> height:auto;<BR> }<BR> </style><BR> </head><BR> <body><BR> <div id="main"><BR> <div class="pin"><BR> <div class="box"><BR> <img src=""/><BR> </div><BR> </div><BR> <div class="pin"><BR> <div class="box"><BR> <img src="https://img.gxlcms.com/./images/g (2).jpg"/><BR> </div><BR> </div><BR> <div class="pin"><BR> <div class="box"><BR> <img src="https://img.gxlcms.com/./images/g (3).jpg"/><BR> </div><BR> </div><BR> <div class="pin"><BR> <div class="box"><BR> <img src="https://img.gxlcms.com/./images/g (4).jpg"/><BR> </div><BR> </div><BR> <div class="pin"><BR> <div class="box"><BR> <img src="https://img.gxlcms.com/./images/g (5).jpg"/><BR> </div><BR> </div><BR> </div><BR> </body><BR> </html><BR></div><BR>js:waterfall.js 1 window.onload=function(){<BR><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code90089"><BR>waterfall('main','pin');<BR> var dataInt={'data':[{'src':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};<br><br> window.onscroll=function(){<BR> if(checkscrollside()){<BR> var oParent=document.getElementById('main');// 父级对象<BR> for(var i=0;i<dataInt.data.length;i++){<BR> var oPin=document.createElement('div'); //添加 元素节点<BR> oPin.className='pin'; //添加 类名 name属性<BR> oParent.appendChild(oPin); //添加 子节点<BR> var oBox=document.createElement('div');<BR> oBox.className='box';<BR> oPin.appendChild(oBox);<BR> var oImg=document.createElement('img');<BR> oImg.src='./images/'+dataInt.data[i].src;<BR> oBox.appendChild(oImg);<BR> }<BR> waterfall('main','pin');<BR> };<BR> }<br><br> }<BR> /*<BR> parend 父级id<BR> pin 元素id<BR> */<BR> function waterfall(parent,pin){<BR> var oParent=document.getElementById(parent);// 父级对象<BR> var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin<BR> var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽<BR> var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】<BR> oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式:定宽+自动水平外边距<br><br> var pinHArr=[];//用于存储 每列中的所有块框相加的高度。<BR> for(var i=0;i var pinH=aPin[i].offsetHeight;<BR> if(i<num){<BR> pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr<BR> }else{<BR> var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH<BR> var minHIndex=getminHIndex(pinHArr,minH);<BR> aPin[i].style.position='absolute';//设置绝对位移<BR> aPin[i].style.top=minH+'px';<BR> aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';<BR> //数组 最小高元素的高 + 添加上的aPin[i]块框高<BR> pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高<BR> }<BR> }<BR> }<BR> /****<BR> *通过父级和子元素的class类 获取该同类子元素的数组<BR> */<BR> function getClassObj(parent,className){<BR> var obj=parent.getElementsByTagName('*');//获取 父级的所有子集<BR> var pinS=[];//创建一个数组 用于收集子元素<BR> for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组<BR> if (obj[i].className==className){<BR> pinS.push(obj[i]);<BR> }<BR> };<BR> return pinS;<BR> }<BR> /****<BR> *获取 pin高度 最小值的索引index<BR> */<BR> function getminHIndex(arr,minH){<BR> for(var i in arr){<BR> if(arr[i]==minH){<BR> return i;<BR> }<BR> }<BR> }<br><br> <BR> function checkscrollside(){<BR> var oParent=document.getElementById('main');<BR> var aPin=getClassObj(oParent,'pin');<BR> var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)<BR> var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性<BR> var documentH=document.documentElement.clientHeight;//页面高度<BR> return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true,触发waterfall()函数<BR> }<BR></div><a href="http://www.laitingfm.com" /><img src="http://www.gxlcms.com/ad/link.jpg" /></a> <a href="https://curl.qcloud.com/kfoLTs9R" /><img src="http://www.gxlcms.com/ad/1040x100.jpg" /></a> <font color="red">本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈<a href="http://www.gxlcms.com/?s=gb-show-p-1.html">版权投诉</a></font> </article> </div> <div class="w310 r"> <a href="https://www.gxlcms.com/server-467421.html" target="_blank"> <img src="http://www.gxlcms.com/Public/aiod/ts.jpg" /></a> <div class="book"> <a href="/special/js/" target="_blank" title="JavaScript教程/参考手册"> <img src="https://img.gxlcms.com/" alt="JavaScript教程/参考手册" /> <h3>JavaScript教程/参考手册</h3> </a> </div> <div class="youclmt"> <h3>JavaScript热搜</h3> </div> <div class="langmubt"> <ul> <li><a href="/JavaScript-57601.html" target="_blank">自定义vue组件发布到npm的方法</a></li><li><a href="/JavaScript-57513.html" target="_blank">Vue利用canvas实现移动端手写板的方法</a></li><li><a href="/JavaScript-57387.html" target="_blank">vue2.0 移动端实现下拉刷新和上拉加载更多的示例</a></li><li><a href="/JavaScript-56947.html" target="_blank">解决vue-router中的query动态传参问题</a></li><li><a href="/JavaScript-56891.html" target="_blank">解决使用vue.js路由后失效的问题</a></li><li><a href="/JavaScript-56813.html" target="_blank">微信小程序实现换肤功能</a></li><li><a href="/JavaScript-56800.html" target="_blank">JS中touchstart事件与click事件冲突的解决方法</a></li><li><a href="/JavaScript-56693.html" target="_blank">完美解决axios在ie下的兼容性问题</a></li><li><a href="/JavaScript-56680.html" target="_blank">在vue项目中引入highcharts图表的方法(详解)</a></li><li><a href="/JavaScript-56652.html" target="_blank">Vue的轮播图组件实现方法</a></li><li><a href="/JavaScript-56414.html" target="_blank">angular基于ng-alain定义自己的select组件示例</a></li><li><a href="/JavaScript-56404.html" target="_blank">详解vue移动端日期选择组件</a></li><li><a href="/JavaScript-56376.html" target="_blank">JS/jQuery实现DIV延时几秒后消失或显示的方法</a></li><li><a href="/JavaScript-56141.html" target="_blank">微信小程序数字滚动插件使用详解</a></li><li><a href="/JavaScript-55910.html" target="_blank">详解基于vue-cli配置移动端自适应</a></li><li><a href="/JavaScript-55795.html" target="_blank">js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能</a></li><li><a href="/JavaScript-55597.html" target="_blank">Swiper自定义分页器使用详解</a></li><li><a href="/JavaScript-55154.html" target="_blank">深入浅出webpack之externals的使用</a></li><li><a href="/JavaScript-55109.html" target="_blank">微信小程序实现简单input正则表达式验证功能示例</a></li><li><a href="/JavaScript-55104.html" target="_blank">Vue-Access-Control 前端用户权限控制解决方案</a></li><li><a href="/JavaScript-54916.html" target="_blank">浅谈Vue SSR 的 Cookies 问题</a></li><li><a href="/JavaScript-54881.html" target="_blank">nodejs async异步常用函数总结(推荐)</a></li><li><a href="/JavaScript-54776.html" target="_blank">结合mint-ui移动端下拉加载实践方法总结</a></li><li><a href="/JavaScript-54571.html" target="_blank">Angular 4根据组件名称动态创建出组件的方法教程</a></li><li><a href="/JavaScript-53772.html" target="_blank">微信小程序媒体组件详解(视频,音乐,图片)</a></li> </ul> </div> <a href="https://curl.qcloud.com/I8w1gZa8" target="_blank"> <img src="http://www.gxlcms.com/ad/tx500x500.jpg" /></a> </div> </div> </div> </div> <script type="text/javascript" src="/layui/layui.js">
内容总结
以上是互联网集市为您收集整理的解析瀑布流布局:JS+绝对定位的实现_javascript技巧全部内容,希望文章能够帮你解决解析瀑布流布局:JS+绝对定位的实现_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。