javascript实现瀑布流自适应遇到的问题及解决方案


Posted in Javascript onJanuary 28, 2015

这几天看了Amy老师的用javascript实现瀑布流,我跟着把代码敲出来。发现这样写只能第一次载入时适应屏幕,以后改变窗口大小就不能做到自适应了。

于是我想到了用window.onresize来使得瀑布流函数从新加载来达到目的,

window.onload=function(){

    //瀑布流函数

    waterfall('content','box');

    //模拟数据加载

    var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}

    //当屏幕大小改变时从新执行瀑布流函数 达到从新适应的作用

    window.onresize=function(){

//      waterfall('content','box');

       setTimeout(function() {waterfall('content','box');}, 200);

    }

    window.onscroll=function(){

        if(checkScroll()){

            var oparent = document.getElementById('content');

            //将熏染的数据添加入html中

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

                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="img/"+dataInt.data[i].src;

                opic.appendChild(oImg);

            }

                waterfall('content','box');

        }

    }

}

当屏幕缩小时是可以的,但是从缩小的放大就出现了BUG

javascript实现瀑布流自适应遇到的问题及解决方案

看没看到后面几列的顶部回不来了,
于是我打开开发工具看是怎么回事,

javascript实现瀑布流自适应遇到的问题及解决方案

第3 4 5个div中不应该有style,是因为缩小的时候给他添加上去的,而放大了他没有清除所以保留下来了就会出现这个样子于是:我在瀑布流函数里加了句aBox[i].style.cssText ='';使得每次进来都清空style

function waterfall(parent,box){

    //将content下所有class box取出来

    var aParent = document.getElementById(parent);

    var aBox = getBclass(aParent,box);

    //获取盒子的宽度

    var aBoxW = aBox[0].offsetWidth;

    //用浏览器的可是宽度除以box宽度 得到列数

    var cols = Math.floor(document.documentElement.clientWidth/aBoxW);

    //设定 content的宽度 和居中

    aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';

    //创建每一列的高度数组

    var hArr=[];

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

        aBox[i].style.cssText ='';

        if(i<cols){

            hArr.push(aBox[i].offsetHeight); 

        }else{

            var minH = Math.min.apply(null,hArr);

            var index = getMinIndex(hArr,minH);  //找出高最矮的 索引值

            //console.log(aBoxW);

            aBox[i].style.position = 'absolute';

            aBox[i].style.top = minH+'px';

            aBox[i].style.left = aBoxW*index+'px';

            hArr[index]+=aBox[i].offsetHeight;

        }

    }

}

这样就解决了缩小后回不来的BUG,可以正常自适应了

javascript实现瀑布流自适应遇到的问题及解决方案

最后我把整个的javascript 贴出来

window.onload=function(){

    //瀑布流函数

    waterfall('content','box');

    //模拟数据加载

    var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}

    //当屏幕大小改变时从新执行瀑布流函数 达到从新适应的作用

    window.onresize=function(){

//      waterfall('content','box');

       setTimeout(function() {waterfall('content','box');}, 200);

    }

    window.onscroll=function(){

        if(checkScroll()){

            var oparent = document.getElementById('content');

            //将熏染的数据添加入html中

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

                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="img/"+dataInt.data[i].src;

                opic.appendChild(oImg);

            }

                waterfall('content','box');

        }

    }

 

}

function waterfall(parent,box){

    //将content下所有class box取出来

    var aParent = document.getElementById(parent);

    var aBox = getBclass(aParent,box);

     

    //获取盒子的宽度

    var aBoxW = aBox[0].offsetWidth;

    //用浏览器的可是宽度除以box宽度 得到列数

    var cols = Math.floor(document.documentElement.clientWidth/aBoxW);

    //设定 content的宽度 和居中

    aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';

    //创建每一列的高度数组

    var hArr=[];

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

        aBox[i].style.cssText ='';

        if(i<cols){

            hArr.push(aBox[i].offsetHeight); 

        }else{

            var minH = Math.min.apply(null,hArr);

            var index = getMinIndex(hArr,minH);  //找出高最矮的 索引值

            //console.log(aBoxW);

            aBox[i].style.position = 'absolute';

            aBox[i].style.top = minH+'px';

            aBox[i].style.left = aBoxW*index+'px';

            hArr[index]+=aBox[i].offsetHeight;

        }

    }

}

//根据class获取到元素

function getBclass(parent,className){

    var boxarr = new Array(); //用来存储获取到的class

        //console.log(parent.prototype);

    allElement=parent.getElementsByTagName('*');

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

        if(allElement[i].className == className){

            boxarr.push(allElement[i]);

        }

    }

    return boxarr;

}

 

//找出高最矮的 索引值

function getMinIndex(arr,value){

    for(var i in arr){

        if (arr[i]==value){

            return i;

        }

    }

}

//建立一个检测轮轮滑动是否成立的函数  返回真假

function checkScroll(){

    var oparent = document.getElementById("content");

    var oBox = getBclass(oparent,'box');

    var lastoBoxTop = oBox[oBox.length-1].offsetTop+Math.floor(oBox[oBox.length-1].offsetHeight/2);

    //console.log(lastoBoxTop);

    var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

    var height = document.body.clientHeight||document.documentElement.clientHeight;

    //console.log(scrollTop);

    return(lastoBoxTop<scrollTop+height)?true:false;

}

css文件贴出来

*{margin: 0;padding: 0;}

body{background-color: #eee;}

.content{ 

    position: relative;

    }

.box{

    padding: 15px 0 0 15px;

    float: left;

}

.pic{

    padding: 10px;

    border: 1px solid #ccc;

    box-shadow: 0 0 5px #CCCCCC;

    border-radius: 5px;

    background: #fff;

}

.pic img{

    width: 220px;

    height: auto;

    border: 1px solid #eee;

}

html文件贴出来

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>javascript瀑布流</title>

        <link rel="stylesheet" type="text/css" href="css/pubuli.css"/>

        <script type="text/javascript" src="js/my.js" ></script>

    </head>

    <body>

        <div id="content">

            <div class="box">

                <div class="pic">

                <img src="img/01.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/02.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/03.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/04.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/05.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/06.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/07.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/08.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/09.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/10.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/11.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/12.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/13.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/14.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/15.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/16.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/17.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/18.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/19.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/20.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/21.jpg"/> 

                </div>

            </div>

            <div class="box">

                <div class="pic">

                <img src="img/22.jpg"/> 

                </div>

            </div>

        </div>

         

    </body>

</html>

好了谢谢大家观看,以前没写过技术分享类文章,有很多不周到的地方希望大家能多多指正。学习前端的小菜鸟敬上Y(^_^)Y

Javascript 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
php结合js实现多条件组合查询
May 28 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 #Javascript
简单谈谈javascript代码复用模式
Jan 28 #Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 #Javascript
扒一扒JavaScript 预解释
Jan 28 #Javascript
javascript弹出页面回传值的方法
Jan 28 #Javascript
JS获得选取checkbox整行数据的方法
Jan 28 #Javascript
js获取checkbox值的方法
Jan 28 #Javascript
You might like
php文件下载处理方法分析
2015/04/22 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
JavaScript实现tab栏切换效果
2020/03/16 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
实例讲解python函数式编程
2014/06/09 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
Python中存取文件的4种不同操作
2018/07/02 Python
python word转pdf代码实例
2019/08/16 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
银行简历自我评价
2014/02/11 职场文书
党员承诺书范文
2014/05/19 职场文书
教育实习指导教师评语
2014/12/31 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
vue实现简易音乐播放器
2022/08/14 Vue.js