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 相关文章推荐
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
js断点调试经验分享
Dec 08 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 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
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
python批量下载图片的三种方法
2013/04/22 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python交易记录链的实现过程详解
2019/07/03 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Python中itertools的用法详解
2020/02/07 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
销售工作人员的自我评价分享
2013/11/10 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
五一放假通知怎么写
2015/08/18 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Linux中文件的基本属性介绍
2022/06/01 Servers