解析瀑布流布局:JS+绝对定位的实现


Posted in Javascript onMay 08, 2013

绝对定位方式的瀑布流布局:

一、布局

1、包围块框的容器:

<div id="main">
    ... ...
<div>

2、一个块框:
<div class="pin">
    <div class="box">
        <img src="./images/g (1).jpg"/>
    </div>
</div>

3、初始化第一行/5个块框:
.pin{
        padding: 15px 0 0 15px;
        float: left;}
    .box{
        padding: 10px;
        border:1px solid #ccc;}
    .box img{
        width:192px;
        height:auto;}

效果:

解析瀑布流布局:JS+绝对定位的实现

二、思路:

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<aPin.length;i++){//遍历数组aPin的每个块框元素
        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()函数
    }

三、最终效果:解析瀑布流布局:JS+绝对定位的实现

四、总结:此为让自己梳理一下思路,表达不太仔细连贯,仅供参考。

五、完成后的html文件和js文件:

html:index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="anchor" content="who care?" />
 <script type="text/javascript" src="waterfall.js"/></script> <title></title>
 <style type="text/css">
     *{padding: 0;margin:0;}
     #main{
         position: relative;
     }
     .pin{
         padding: 15px 0 0 15px;
         float:left;
     }
     .box{
         padding: 10px;
         border:1px solid #ccc;
         box-shadow: 0 0 6px #ccc;
         border-radius: 5px;
     }
     .box img{
         width:162px;
         height:auto;
     }
 </style>
 </head>
 <body>
 <div id="main">
     <div class="pin">
         <div class="box">
             <img src="./images/g (1).jpg"/>
         </div>
     </div>
     <div class="pin">
         <div class="box">
             <img src="./images/g (2).jpg"/>
         </div>
     </div>
     <div class="pin">
         <div class="box">
             <img src="./images/g (3).jpg"/>
         </div>
     </div>
     <div class="pin">
         <div class="box">
             <img src="./images/g (4).jpg"/>
         </div>
     </div>
     <div class="pin">
         <div class="box">
             <img src="./images/g (5).jpg"/>
         </div>
     </div>
 </div>
 </body>
 </html>

js:waterfall.js 1 window.onload=function(){
waterfall('main','pin');
     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'); //添加 元素节点
             oPin.className='pin';                   //添加 类名 name属性
             oParent.appendChild(oPin);              //添加 子节点
             var oBox=document.createElement('div');
             oBox.className='box';
             oPin.appendChild(oBox);
             var oImg=document.createElement('img');
             oImg.src='./images/'+dataInt.data[i].src;
             oBox.appendChild(oImg);
         }
         waterfall('main','pin');
         };
     }
 }
 /*
         parend 父级id
         pin 元素id
 */
 function waterfall(parent,pin){
     var oParent=document.getElementById(parent);// 父级对象
     var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
     var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
     var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
     oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式:定宽+自动水平外边距
     var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
     for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
         var pinH=aPin[i].offsetHeight;
         if(i<num){
             pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
         }else{
             var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
             var minHIndex=getminHIndex(pinHArr,minH);
             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;//更新添加了块框后的列高
         }
     }
 }
     /****
         *通过父级和子元素的class类 获取该同类子元素的数组
         */
     function getClassObj(parent,className){
         var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
         var pinS=[];//创建一个数组 用于收集子元素
         for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
             if (obj[i].className==className){
                 pinS.push(obj[i]);
             }
         };
         return pinS;
     }
     /****
         *获取 pin高度 最小值的索引index
         */
     function getminHIndex(arr,minH){
         for(var i in arr){
             if(arr[i]==minH){
                 return i;
             }
         }
     }
 
     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()函数
     }
Javascript 相关文章推荐
JavaScript中的History历史对象
Jan 16 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 #Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 #Javascript
使用JavaScript 实现各种跨域的方法
May 08 #Javascript
jQuery根据纬度经度查看地图处理程序
May 08 #Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 #Javascript
JavaScript 创建运动框架的实现代码
May 08 #Javascript
jQuery输入城市查看地图使用介绍
May 08 #Javascript
You might like
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python之Character string(实例讲解)
2017/09/25 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Django forms组件的使用教程
2018/10/08 Python
Python 编程速成(推荐)
2019/04/15 Python
Python运行DLL文件的方法
2020/01/17 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
1亿有多大教学反思
2014/05/01 职场文书
搞笑婚前保证书
2015/02/28 职场文书
律师函格式范本
2015/05/27 职场文书
现货白银电话营销话术
2015/05/29 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
python 闭包函数详细介绍
2022/04/19 Python