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 相关文章推荐
javascript 添加和移除函数的通用方法
Oct 20 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
理解jQuery stop()方法
Nov 21 Javascript
使用javascript获取页面名称
Dec 23 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
javascript事件模型介绍
May 31 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
咨询公司各岗位职责
2013/12/02 职场文书
大学生先进事迹材料
2014/02/16 职场文书
绩效工资实施方案
2014/03/15 职场文书
项目经理任命书内容
2014/06/06 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
转变工作作风心得体会
2016/01/23 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL